HTML basic tags (1)
1. What is HTML
html: Hyper TextMakeup language: Hypertext Markup Language
html: The "source code" of the web page
Browser: a tool to "interpret and execute" the html source code
2. Summary information of the web page
The summary information of the web page is conducive to browser analysis and search Engine search:
2.1 Use the
tag </p> <p><head></p> <p><tlite>Sohu-China's largest portal
2.2 Use
(1) Describe document type and character encoding
(2) Describe search keywords and description
3. Blocks and lines in HTML pages
HTML tag classification (to facilitate subsequent layout design)
Block-level labels: Displayed in a "block" shape, separated by one line before and after
Row-level labels: Displayed one by one line by line
Emphasis: The difference between block-level and row-level labels:
Block level: line breaks before and after
Row level: displayed in one line
Block-level tags are divided into: basic block-level tags, block-level tags commonly used in layout
Basic Block-level tags:
001. Title tag
Title ...
< h6>Title
h1 is the largest, h6 is the smallest
002. Paragraph tags
...
003. Horizontal line tags
Block-level tags commonly used in layout:
001. Ordered list tags
List item 1
002. Unordered list tags
003. Define description tags (commonly used for mixing images and text) Editor)
Title
Description1
004. Use definition description tags to achieve the effect of mixed graphics and text
005. Table
006. Form
007. Partition tag div
Key points: Generally used as structured block elements, as logical partitions (blocks) That is, containers are used.
04. Please tell me what are the 4 block structures commonly used in actual development?
01.div-ul(ol)-li: Commonly used for category navigation or menus, etc.
02.div-dl-dt-dd: Where commonly used words are mixed with images and text
03.table-tr-td is often used for image and text layout or data display
04.form-table-tr-td: Commonly used for layout forms
05. Row-level tags
001, image tags
For compatibility between browsers, it is recommended to use the title attribute to ensure that the prompt text can be displayed
alt: When the picture is not When displayed, the text displayed on the picture
title: The text displayed on the picture when the mouse is over
002. Row-level label : Displays the unique style in a certain line
Text and other line-level content
003. Line break tags
06. Why is w3c needed? Standards
w3c: World Wide Web Consortium, World Wide Web Consortium
W3C’s functions: Responsible for formulating and maintaining web industry standards
Web structure advocated by W3C:
1. Separation of content (structure) and presentation (style)
2. HTML content structure requires semantics
07.XHTML1.0 basic specification
001. Tag name and Attribute names must be lowercase
002.html tags must be closed
003. Attribute values must be enclosed in quotes
004. Tags must be nested correctly
005. A document type declaration must be added
The document declaration must be at the front of the document. There are three levels: Strict (strict type), Transitional (transitional type), Frameset (frame type)
Basic HTML tags (2)
01. Hyperlink--implementing navigation between pages
Syntax: Link hot text or image
For example:
02. Relative Path: relative to the address of the current directory, commonly used
Login
Absolute path: pointing to the complete target address Description, use sparingly
Login
Sohu
Important: If you want to access the upper-level path of the current path, you can use ../
03.Super Three application scenarios of links
001. Links between pages
002. Anchor links
003. Functional links
001. Links between pages
[Login]
Applicable occasions: commonly used in website navigation
002. Implement anchors Links (divided into same-page anchor links and inter-page anchor links)
Same-page anchor links:
1. Define tag (anchor): Target position
2. Set the link to the mark position: Current position
Applicable occasions: Applicable When the page content is large and exceeds one screen
Cross-page link:
1. The page where the tag is located: [Celebrity Area]< /a>
Anchor links can be used on the same page or across pages
2. Set the link to the tag position: star Special area
003. Functional links
E-mail, QQ links, etc.
To be written...
04. Comments
The commented lines are used to increase the readability of the code and are not displayed
05. Special symbols
Space:
Greater than: >
Less than: <
Quotation marks ("): "
Copyright number (): ©
Because <, > and other symbols have been used in HTML, they must be replaced by other symbols, all ending with ;
06. Common form elements
Single-line text box (text)
Password box (password)
Text area (textarea)
Radio button(radio)
Checkbox(checkbox)
Submit button(submit)
Drop-down list(select)
< ;select>
January
Reset button (reset)
07. Basic syntax of the form
action: Specify which handler on the server will handle it after submission
method : Specify the method to submit to the server: generally the post or get method, the post method is safer.
08. The execution principle of the form
Client: request login, fill in the account information through the form
The client and the server are like two people communicating, thus establishing interactive activities
Server side: Verify the account information sent and give feedback!
09. Basic format of form elements
10. Introduction of form elements one by one
Text box
name is used to obtain data on the server side, for example: request.getParameter("userName")
Password box
Button
Normal button: button
Submit button: submit
Reset ( Clear) button: reset
Image button: image
Radio button
The same name indicates that they belong to the same group
Features: Single selection
Checkbox
Features: Multiple selection
File field
Example:
...
< /select>
Function: Provide fixed options to avoid user input errors
Multi-line text box
Hidden field
It is convenient for the server to "remember" the client's information. Data that you don’t want customers to see
Read-only and disabled attributes
readonly: I hope that the content in a certain box can only be viewed by users and cannot be modified
disabled: Users are restricted from using it because the conditions for use are not met
Agree to the above agreement
< input name="btn" type="submit" value="Register" disabled="disabled"/>
Table application and layout
1. Why use sheet?
Common applications of forms:
01 Forum
02. Shopping website
03. Portal application form
2. The basic structure of the table
Rows, columns and cells
Features: Normally, the height of the same row is the same and the width of the same column is the same
3. Basic syntax of tables
How to create a table?
represents the beginning of the table, border="2" indicates that the border width is 2
4. The table spans rows and columns (emphasis, emphasis!! ! )
How to span columns
< td colspan="3">Student performance
Chinese
98
;/td>
95
Among them, the colspan attribute indicates how many columns it spans
The content of other cells in the row is omitted
The rowspan attribute indicates how many rows it spans
5. Table advanced tags
Table title:
Header:
Header: Data subject:
layout? Implementation steps:
01. Determine the number of rows and columns: 5 rows and 2 columns
02, write a table with 5 rows and 2 columns
03, determine the span of rows Cells spanning columns:
1 row and 1 column cells span 2 columns
2 rows and 1 column cells span 4 rows
04. Add rowspan and colspan to delete redundant ones Cell,
Best selling online
……
7. How to implement form layout?
What are the requirements for displaying data using tables for layout? What is the implementation idea?
Usage occasions: The data display requirements are regular and consistent with the characteristics of table layout
Layout implementation ideas:
01. How many rows and columns of tables are needed?
02. Which cells span rows or columns?
03. Write table code to implement
Note: 1. The width of cells in the same column is determined by the cell with the largest width in the column
2. Same row The cell width is determined by the cell with the highest height in the row
8. Nested layout
Disadvantages of nested table layout:
01, The amount of code is large
02, and the hierarchical structure is relatively complex
03, which is not conducive to searching for data with search engines such as Google
9. Applicable occasions for table layout:
01, regular data display
02, form page
Tip: Table layout is not suitable for irregular and complex pages. In this case,
needs to use DIV CSS layout
Framework
1. Why use frames?
Two types of uses of frames:
01. Display multi-window pages--use
frameset 02. Page reuse--use Inline frame
2. Characteristics of frame files
Composed of multiple page files
Main file (index.html):
01.top.html 02.left.html 03.right.html
3. The basic structure of the frame
Steps to create a frame web page:
01. Create the HTML file corresponding to each sub-window
02. Create the entire frame page file and reference the sub-window file
Basic syntax of the frame page:
Among them, cols separates the window into 3 parts, left, middle and right
rows separates the window into 2 parts, upper and lower
border Represents the border size
Vertically separated window
<![CDATA[ </p> <p> <body> If the browser does not support frames, only the content in the body will be displayed </body></p> <p>]]>
Note: 01. Frames Cannot coexist with body
02. For compatibility, you can use the <![CDATA[ tag </p> <p> to separate windows horizontally: </p> <p> <frameset cols="200,*,200 " border="5" bordercolor="#FF0000"></p> <p> <frame name="leftFrame" src="subframe/the_first.html" /></p>
<p> <frame name="mainFrame" src="subframe/the_second.html" /></p> <p> <frame name="rightFrame" src="subframe/the_third.html" /></p> <p> </frameset></p> <p> </p> <p> Frame implements multi-window page: </p> <p> Typical 2 rows and 2 columns structure </p> <p> <frameset rows="20%,*" frameborder="0"></p> <p> <frame src="subframe/top.html" name="topframe" scrolling="no" </p> <p> noresize ="noresize" /></p> <p> ="no" </p> <p> noresize="noresize" /></p> <p> </frameset></p> <p> </frameset> </p> <p> <frameset rows="20%,*" farmeborder="0"></p> <p> <frame src="subframe/right.html" name="rightFrame"></p> <p> </frameset></p> <p> 02. Set the target attribute of <a> (window subpage) </p> <p> <a href="buy.html" target=" rightFrame">Go</a></p> <p> Set the link to open in the right window </p> <p> </p> <p> Other uses of target: </p> <p> In a new window Displayed in: _blank</p> <p> Displayed in self window: _self</p> <p> Displayed in parent window: _top</p> <p> Displayed in parent window: _parent</p> <p> </p> <p> 3. Why use <iframe/></p> <p> 01.<frameset> requires the use of multiple files and the directory structure is complex </p> <p> 02. Embedding is more flexible and can be used on web pages Use anywhere </p> <p> 03. Can be used as a template to reuse on multiple pages of this website </p> <p> </p> <p> Basic usage of iframe </p> <p> <iframe src ="Reference page address" name="Frame identification name"</p> <p> frameborder="border" scrolling="no"></p> <p> Note: Unlike <frameset>, iframe is placed <body>In the tag</p> <p> </p> <p> Common attributes</p> <p> How to set the display in the inline window</p> <p> <a href="subframe/the_third.html " target="mainFrame"></p> <p> The third page is displayed below</p> <p> </a></p> <p> <iframe name="mainFrame" width="800px" height ="150px"</p> <p> scrolling="yes" noresize="noresize"</p> <p> src="subframe/the_second.html"/> </p> <p> </p> <p> CSS style sheet (1) </p> <p>1. Why use CSS style sheet? </p> <p>CSS full name (Cascading Style Sheets) Cascading Style Sheets</p> <p> </p>Style sheets can separate content and styles to facilitate team development<p> </p>Style reuse to facilitate website development Post-maintenance <p> </p> Precise control of the page to achieve exquisite and complex pages <p> </p> <p> Description: CSS is used to beautify the page, and can make more detailed settings for page elements. The main style Describe the font color, background color, border, etc. of the element. </p> <ol>2. Purpose of CSS <li> </li> <li>Appearance beautification</li> <li>Layout, positioning</li> </ol> <p>Basic CSS syntax: </p> <p> <head></p> <ol><style type="text/css"><li> </li>Selector (i.e. modified object) {<li> </li> Object attribute 1: attribute value 1 ;</ol> <p> Object attribute 2: attribute value 2;</p> <p>}</p> <p> </style></p> <p> </head></p> <p>例子：</p> <p> Li</p> <p>{</p> <p> Color:red;</p> <p> Font-size:30px;</p> <p> Font-family:隶书;</p> <p>}</p> <p> 3.选择器的分类</p> <p> 选择器分为：标签选择器、类选择器、ID选择器(重点)</p> <ol> <li>标签选择器</li> </ol> <p><style type=”text/css”></p> <p> Li{</p> <p> Color:red;</p> <p> Font-size:28px;</p> <p> Font-family:隶书;</p> <p>} </p> <p></style></p> <p>作用：用于修饰同类HTML标签的共同风格</p> <ol> <li>类选择器</li> </ol> <p><style type="text/css"></p> <p> .blue{color:blue;} </p> <p> ……</p> <p></style></p> <p> ……</p> <p><ul></p> <p><li class="blue">家用电器</li></p> <p><li>各类书籍</li></p> <p><li class="blue">手机数码</li></p> <p><li>日用百货</li></p> <p></ul></p> <p>注意：类名有点号</p> <ol> <li>ID选择器</li> </ol> <p> <style></p> <p>#menu{</p> <p> width:200px; background:#ccc;</p> <p> font:bold 14px 宋体;</p> <p>}</p> <p></style></p> <p>… …</p> <p><div id="menu"></p> <p> <ul></p> <p> <li>家用电器</li></p> <p> ……</p> <p> </ul></p> <p></div></p> <p>4.文本属性</p> <p>字体、字号：</p> <p> Font(缩写形式)</p> <p> Font-weight(粗细)</p> <p> Font-size(大小)</p> <p> Font-family(字体)</p> <p> 行距、对齐等：</p> <p> Line-height(行高)</p> <p> Text-align(对齐)</p> <p> Letter-spacing(字符间距) 我 是</p> <p> Text-decoration(文本修饰) </p> <p> </p> <p> White-space(空白处理) 属性值：nowrap:不换行</p> <p><style tylie="text/css"></p> <p>li{</p> <p> font: 12px 宋体;</p> <p> text-align:left;</p> <p> line-height:28px;</p> <p> }</p> <p>.title{ </p> <p> letter-spacing:5px;</p> <p> white-space:nowrap;</p> <p> text-decoration:underline;</p> <p> }</p> <p>.bigFont {</p> <p> font-size:16px;</p> <p> color:red; </p> <p> }</p> <p></style></p> <p> </p> <p>5.背景属性</p> <ol> <li>background(缩写形式)</li> <li>background-color(背景色)</li> <li>background-image(背景图)</li> <li>background-repeat(背景图重用方式)</li> <li>background-position(位置坐标、偏移量)</li> </ol> <p> </p> <p>div{ </p> <p> background:url(images/bg.jpg) no-repeat; </p> <p> background-position: -70px -60px</p> <p>}</p> <p>6 .背景属性的经典应用</p> <p>图标截取-背景偏移量技术：理解清楚是左移还是右移，然后设置div的宽度和高度以适应图片的显示。</p> <p><html></p> <p><head></p> <p><title>文本属性</title></p> <p><style type="text/css"></p> <p> div{</p> <p> width:20px;background:url(images/icon.gif) no-repeat;</p> <p> float:left;</p> <p> }</p> <p>.help{</p> <p> background-position:-120px 0px;</p> <p> }</p> <p> </p> <p> .login{</p> <p> width:40px;background-position:0px -20px;</p> <p> }</p> <p></style></p> <p></head></p> <p><body></p> <p> </p> <p> <div></div><span>购 物 车</span></p> <p> <p> </p></p> <p> <div class="help"></div>帮助中心</p> <p> <div class="login">登录</div></p> <p></body></p> <p></html></p> <p>7. List attributes </p> <p>01. List li common attributes </p> <p> List-style (list style) value</p> <p> Attribute value Method Grammar rules Example </p> None Style List-style: none; Brush Teeth<p> </p> disc solid circle(< ul>Default type) list-style:disc; ●brush your teeth<p> </p> circle hollow circle list-style:circle; ○ brush your teeth<p> </p> square solid square list-style :square; ■ Brush your teeth<p> </p> decimal Number (<ol>Default type) list-style:decimal; 1. Brushing teeth<p> </p> Table common attributes <p> </p> Background color; <p> </p> color: text color <p> </p> border-style: solid; border style, solid line (default is none), and dotted (point) and other values; <p> </p> border-color: border color; <p> </p> border-width: border width (default is 0) <p> </p> <p> </p>CSS style sheet (2) <p> </p> 1. How to control CSS style <p> </p> <ol>Box model<li> </li> </ol>All elements in the web page can be viewed as boxes one by one<p> </p>The box model includes: <p> </p> Element content<p> </p> Filling ( Also called inner margin): padding<p> </p> Border: border<p> </p> Border (also called outer margin): margin<p> </p> <ol>Style control idea<li> </li> </ol>In-box style modification: set the color, font and other appearance of web page elements<p> </p>Box position layout: determine the location of the box and its relationship with other web elements<p> </p>2. Detailed explanation of the box model <p> </p> <ol>Why do you need the box attribute<li> </li> </ol>1. The box model is the basis of web page layout<p> </p>2. The box attribute is the key attribute of the box model<p> </p> <ol>What are box attributes<li> <ol>Box attributes<li> </li>
</ol> </li> </ol>margin (margin/border)<p> </p>Each attribute is divided into For four directions <p> </p>Margin-top<p> </p>Margin-right<p> </p>Margin-bottom<p> </p>Margin-left<p> </p>Margin:1px, 2px, 3px, 4px; (Each value is: top, right, bottom, left, clockwise) <p> </p>Margin: value 1, value 2, value 3; (Meaning: value 1 for top, value for left and right 2, the bottom is the value 3)<p> </p>Margin:1px,2px; (Meaning: the upper and lower values are 1, the left and right values are 2)<p> </p>Margin:0 auto; equivalent to margin:0 auto 0 auto; that is, the top and bottom are 0, the left and right are automatic, and the HTTP header protocol is required to display in the center <p> </p>Margin: value 1; (meaning: the top, right, bottom, and left are all value 1) <p> </p>Margin- left:1px;<p> </p> <p> </p>Border(border)<p> </p> Modification attributes: <p> </p>Border-color<p> </p>Border-width<p> </p>Border-style<p> </p> Four directions: <p> </p> 🎜> <p> Border -left</p> <p> Typical applications</p> <p>Border-style:none;</p> <p>Border:1px solid red;</p> <p>Border-right:5px dotted blue;</p> <p> (solid line, dashed dotted point) </p> <p> Use the border attribute to modify the form </p> <p><style type=”text/css”></p> <p> . textBorder{</p> <p> Border-width:1px;</p> <p> Border-style:solid;</p> <p>}</p> <p></style></p> <p> </head></p> <p><body></p> <p><form action="" method="post"></p> <p><p>Name: </p> <p> <input name="fname" type="text" class="textBorder"/></p>
<p></p></p> <p><p>Password: </p> <p> <input name="pass" type="password" class="textBorder" size="21" > ;</p> <p></p></p> <p> </p> <p>Padding(Padding/Padding)</p> <p> Padding attribute</p> <p> Padding</p> <p> Padding-top</p> <p> Padding-right</p> <p> Padding-bottom</p> <p> Padding-left</p> <p> 3. The width, height and actual occupancy of the element</p> <p>The actual occupancy of the element (actual width and height)</p> <p> Box height = height attribute, top and bottom padding height, top and bottom border height (top and bottom two) </p> <p> Box width = width attribute left and right Fill width, left and right border width </p> <p> 4. Use box attributes to implement DIV CSS layout </p> <p> Implementation steps: 1. Analyze the block structure of the page and form an HTML organizational structure </p> <p> In order to control Center the entire page and add a large container: container</p> <p> 2. Write the CSS control positioning of each DIV block </p> <p>5. Float</p> <p>01. Why float is needed Attributes </p> <p>Using float attributes can solve the problem that two layouts cannot be displayed side by side </p> <p>02. What is a floating attribute </p> <p>The so-called floating is that the label is separated from the regular document flow and behaves like Float right or left </p> <p>Default regular document flow: page content is arranged from top to bottom, left to right, and DIV blocks are displayed in new lines. </p> <p>03, three significant characteristics of floating </p> <p>1. DIV block elements lose their "block-like" line wrapping display characteristics and become inline elements. </p> <p>2. Close to the border of the previous floating element (same direction) or parent element. If the width is not enough, it will be displayed in a new line. </p> <p>3, occupies the space of inline elements, causing inline elements to be displayed around </p> <p>6. Why is the clear attribute needed? </p> <p> By default, the third div determines whether to wrap according to the window size. , if you want to wrap the line, you can use the clear separation attribute. </p> <p> What is the clear attribute? </p> <p> Clear functions: 1. If the previous element floats left or right, wrap it in a new line to separate it. </p> <p> 2, only valid for block-level elements </p> <p> Value of Clear attribute </p> <p> Right</p> <p> Left</p> <p> Both</p> <p> None</p> <p> CSS Style Sheet (3)</p> <p> 1. Characteristics of hyperlink style </p> <p> 01. Particularity of hyperlink style </p> <p> Text or When a link is added to an image, the original style will be lost and the style of the link will be inherited </p> <p> 02. Four states of hyperlink style </p> <p> Unvisited state (a:link) </p> <p> Already Visited status (a:visited) </p> <p> Mouse over status (a:hover) </p> <p> Activate selected status (a:active) </p> <p> Note: After adding the link, the picture / Changes in text style </p> <p> A border is added to the picture, and an underline is added to the text </p> <p>2. Hyperlink pseudo-class style </p> <p> uses a selector: define the style through state, Generally called pseudo-class </p> <p> Pseudo-class example description</p> <p> a:link{color:#999;} Unvisited status</p> <p> a: visited a: visited { color:#333;} . a: active {color:#999; } Activate the selected state (when the mouse click is not released) </p> <p>3. How to set the hyperlink style: because it implements css style reuse </p> <p>设置超链接样式的步骤：</p> <p> 1.确定页面所有超链接的样式是否相同，否则分开定义</p> <p> 2.先确定四个状态共有样式，再分别定义其他状态</p> <p>4.如何应用样式</p> <p>三类应用样式的方式：</p> <p> 01.内部样式表：</p> <p> <style type="text/css"></p> <p> //样式定义</p> <p> </style></p> <p> HTML和CSS在同一文件，方便开发时修改，样式和内容分离</p> <p> 不够彻底，不利于页面复用</p> <p> 02.外部样式表</p> <p> <link rel="stylesheet" href=CSS外部文件名 type="text/css"/></p> <p> 分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可以共享同一CSS</p> <p> 03.行内样式表</p> <p> <a href="#" style="color:red;font-size:10px;">日用百货</a></p> <p> 单独定义某个元素的样式，灵活方便。但因为内容与样式混在</p> <p> 一起，应尽量少用或不用。</p> <p>5.样式的优先级</p> <p> 01.各类样式有继承</p> <p> 02.各类样式的优先级</p> <p> 由低到高，“近者优先”原则</p> <p> 1，浏览器默认设置</p> <p> 2，外部样式表文件</p> <p> 3，内部样式表</p> <p> 4，行内样式表</p> <p> 选择器的优先级</p> <p> a=（最高级 ）</p> <p><a style=””></p> <p> b=（ID用到的数目）</p> <p> c=（class用到的数目）</p> <p> d=（标签用到的数目）</p> <p> 03. <style type="text/css"></p> <p> div</p> <p> {</p> <p> background:green;</p> <p> }</p> <p> </style></p> <p> <link href="css/layout.css" rel="stylesheet" type="text/css" /></p> <p></head></p> <p><body></p> <p> <div style="background:blue;"></p> <p> </div></p> <p></body></p> <p> </p> <p> 选择器优先级的案例</p> <p> <style type="text/css"></p> <p> div</p> <p> {</p> <p> width:200px;</p> <p> height:100px;</p> <p> background:yellow;</p> <p> }</p> <p> .dv1</p> <p> {</p> <p> background:red;</p> <p> }</p> <p> #mydiv</p> <p> {</p> <p> background:blue;</p> <p> }</p> <p> </style></p> <p></head></p> <p><body></p> <p> <div id="mydiv" class="dv1" style=" background:#ccc"></p> <p> </div></p> <p></body></p> <p>6. Typical local layout structure</p> <p>div-ul(ol)-li: often used in category navigation or menus, etc.</p> <p> div-dl-dt-dd: Commonly used expressions mixed with images and text </p> <p> table-tr-td: Commonly used in situations where images and texts are laid out or data displayed </p> <p> form-table -tr-td: Commonly used when laying out forms. </p> <p> Modification of div-ul-li local layout style </p> <p> Implementation ideas: layout structure analysis, css style analysis </p> <p>7. How to reuse CSS code </p> <p>Extract duplicate codes to create classes, such as: .pic{//Common CSS code}</p> <p> Application styles: multiple class styles, such as: <li class="pic pic1"></li> ;</p> <p> div-dl-dt-dd local layout style modification</p> <p> </p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p> <p> </p> <p><html xmlns="http://www. w3.org/1999/xhtml"></p> <p><head></p> <p> <title></title></p> <p> <style type="text/css "></p> <p> div</p> <p> {</p> <p> background:url(./images/bg.gif) no-repeat;</p> <p> padding-top: 32px ;</p> <p> width:235px;</p> <p> height:292px;</p> <p> }</p> <p> div dl</p> <p> {</p> <p> margin :3px;</p> <p> padding-left:5px;</p> <p> }</p> <p> div dl dt</p> <p> {</p> <p> float:left;</p> <p> padding:2px 0px;</p> <p> }</p> <p> img</p> <p> {</p> <p> height:46px; width:53px; border:1px solid red;</p> <p> }</p> <p> dd a</p> <p> }</p> <p> line-height:60px;</p> <p> vertical-align:middle ;</p> <p> text-decoration:none;</p> <p> }</p> <p> </style></p> <p></head></p> <p> ; body></p> <p> <div></p> <p> </p> <p> <dl></p> <p> /></dt></p> <p> ;</p> <p> dt></p> <p> </p>
<p> </p> <p> ="#">Recommended for dark circles, non-stop whitening</a></dd></p> <p> <dt><img src="images/show4.jpg"/></dt></p> <p> The best choice for slimming and body shaping</a></dd></p> <p> </dl></p> <p> ;</p> <p></html></p> <p>Basic symbols in 8.css</p> <p> (space) (comma) (#) (colon) </p> <p> Selector Combination of: </p> <p> Tag class </p> <p> Tag id</p> <p> id Space class </p> <p> id Space class comma</p> <p>Li.pic{wid th: 28px;}</p> <p>div#nav{text-align:center;}</p> <p>#nav .pic{border:1px;}</p> <p>#nav .pic,#nav . text{height:26px;}</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>
<p> </p>
<p> </p> <p></p> <p></p> <p> </p> <p></p> <p></p> <p class="sycode"></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML CSS--Learning about margin and padding_html/css_WEB-ITnose" href="https://m.php.cn/faq/273966.html">HTML CSS--Learning about margin and padding_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="HTML CSS--Learning about margin and padding_html/css_WEB-ITnose" href="https://m.php.cn/faq/273972.html">HTML CSS--Learning about margin and padding_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>]]>
