html introduction
1.1 html overview
html full name: Hyper Text Markup Language (Hyper Text Markup Language) Hyper Text Markup Language
is an application under the Standard General Markup Language (SGML), it is also a specification, a standard, it uses markup symbols to mark the webpage to be displayed Parts.
The web page file itself is a text file, by adding tags in the text file.
You can tell the browser how to display the content (such as: how to process the text, how to arrange the screen, how to display the picture, etc.).
The browser reads the webpage files in order, and then interprets and displays the marked content according to the markers. Marks that are incorrectly written will not indicate the error and will not stop the interpretation and execution process. The compiler can only analyze the cause of the error through the display effect And the error location. But it should be noted that for different browsers, the same tag may have different interpretations, and thus may have different display effects.
1.2 html features
Hypertext markup language document production is not very complicated, but it has powerful functions and supports file embedding in different data formats. This is also one of the reasons for the popularity of the World Wide Web. Its main features are as follows:
1 Simplicity: the use of Hypertext Markup Language version upgrade Super set mode, which is more flexible and convenient.
2 Scalability: The extensive application of Hypertext Markup Language has brought about enhanced functions and increased requirements such as identifiers. Hypertext Markup Language adopts the method of sub-category elements to ensure system expansion.
3 Platform independence: Although personal computers are popular, there are many people who use other machines such as MAC. Hypertext markup language can be used on a wide range of platforms. This is another reason why the World Wide Web is popular.
4 Versatility: In addition, HTML is the universal language of the Internet, a simple and universal markup language. It allows web creators to create complex pages that combine text and images. These pages can be viewed by anyone else on the Internet, no matter what type of computer or browser is used.
1.3 html grammar rules
<!DOCTYPE html>
<html>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--需要展示的信息-->
</body>
</html>
1.html structure: including head body 2.html tags are
keywords surrounded by angle brackets
3.html tags usually appear in pairs, with a beginning and an end, including paired tags and independent tags
4.html usually has Attribute, format: attribute name = "attribute value" (separate spaces between multiple attributes)
5. html tags are not case sensitive, lower case is recommended
html basic tags
2.1 Structure label
<html><html>: Root tag
<head></head>: Head tag
<title></title>: Page title
<body></body>: Body tag: Web content
Attribute:
color: the color of the text<font color="red">内容</font>
bgcolor: background color <body bgcolor="bisque"> </body>
background: background image
color representation: the
first way: use the color name: red green blue the
second way: RGB mode (#000000 #ffffff #325687 #377405)
2.2 Typesetting label
1. Annotation label: <!--注释-->
2. Line break label: <br/>
3. Paragraph label: <p>文本文字</p>
Features: There is a line height between paragraphs
Attribute: align alignment (left: left alignment center: centered right: right alignment)
4. Horizontal line label : <hr/>
Attribute:
width: the length of the horizontal line (two types: the first type: pixel representation; the second type, percentage representation)
size: the thickness of the horizontal line (in pixels, for example: 10px)
color: the color of the
horizontal line align: the alignment of the horizontal line (left: left aligned center: centered right: right aligned)
2.3 Container label
<div></div>: Block label, one line alone, line break
<span></span>: Row-level label, all content is on the same line
effect:
<div></div>: Mainly combined with css page block layout
<span></span>: Carry out friendly prompt information
2.4 Text label
2.4.1 Basic text labels
<font></font>
Attributes: size: set font size
color: set font color
face: set font
2.4.2 Title Tag
<h1></h1>—-<h6></h6>
As the number increases, the text becomes smaller, the font is bold, and the built-in font size occupies one line by default;
2.5 List label
2.5.1 Unordered List
the
Unordered list tags:<ul></ul>
Attribute: type: three values, namely
circle (open circle), disc (default, filled circle), square (black square)
list items:<li></li>
Examples are as follows:
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.5.2 Ordered List
ol
Ordered list tags:
Attributes: type: 1, A, a, I, i (numbers, letters, Roman numerals)
list items:
<li></li>
examples are as follows:
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3 Definition list
dl
定义列表 <dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>
2.5.4 List nesting
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
2.6 Picture tags
<img/>Independent label
Attributes:
src: picture address: relative path (same website) absolute path (different websites)
width: width
height: height
border: border
align: Alignment, representing the relative position of the image and adjacent text (there are three attribute values: top middle bottom)
alt: text description of the image
hspace and vspace set the top, bottom, left, and right margins of the picture to avoid text or other pictures too close
2.7 Link label
Hyperlink can be text or an image. You can click on the content to jump to a new document or a certain part of the current document.
<a>文本或图片</a>
Attributes:
href: the address of the page to jump to (the protocol needs to be added to jump to the external network);
name: name, anchor point (back to anchor point: top, bottom, middle), the writing format of visiting anchor point: #name的The value
target: _self (self) _blank (new page, the previous page exists) _parent _top The default _self
_search is equivalent to giving a name to the page. If the page exists when it is opened again, no new page will be opened. It can be any name.
2.8 Form labels The
form is <table>defined by labels. Each table has a plurality of rows (by the <tr>definition of the label), each row is divided into a plurality of cells (a <td>custom label). Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.
2.8.1 Ordinary form
(table,tr,td)
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.2 Table header
(th)
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.3 Combining the columns of the table
colspan attribute
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.4 Combining rows of tables
rowspan attribute
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
2.9 Text formatting tags
<b>define bold text.
<big>Define large characters.
<em>The definition focuses on text.
<i>Define italics.
<small>Define small fonts.
<strong>The definition emphasizes the tone.
<sub>Define the subscript word.
<sup>Define superscript words.
<ins>Define the inserted word.
<del>Define deletion words.
html form tag
HTML forms are used to collect different types of user input
3.1 Form tag
Common attributes: action: represents the action, the value is the address of the server, and the data of the form is submitted to the address for processing
method: request method: get and post
enctype: indicates the type of form submission
Default value: application/x-www-form-urlencoded ordinary form
multipart/form-data Multipart form (usually used for file upload)
get:
1. In the address bar, the request parameters are all spliced after the address path?name="Zhang San"&password="123456"
2. Not safe
3. High efficiency
4. The size of get request is limited, different browsers have different, but it is about 2KB
usage: it is generally used to query data.
post:
1. Address bar: request parameters are processed separately.
2. Safe and reliable
3. Low efficiency
Usage: Generally used for inserting and modifying operations
3.1.1 input tag
type: The following are possible values for type:
1.1 text input content
1.2 password password box ciphertext or mask
1.3 Radio means single selection, name must be consistent; value: the data submitted to the server means that only one can be selected in the same group (checked = "checked" means selected)
1.4 checkbox means multiple selection, name must be consistent, which means that the same group can be selected Select multiple, the return value is an array (checked = "checked" means selected)
1.5 file: means uploading the control. The above input properties must have the name attribute, and the value at the beginning means the default value (after getting the content of the input box) It needs to be taken according to the name), the following buttons do not have input properties and do not need the name attribute, but the text on the button prompts using the value attribute
1.6 submit
1.7 reset
1.9 image image submit button
The attributes of all the above input: width sets the width, height sets the height border sets the border
1.10 button Normal button
1.11 hidden means hidden domain, which is needed by the content server of the box, but does not want users to know (don’t want to display it clearly on the interface)
name attribute: the name of the form element. Only the name attribute can be submitted to the server.
3.1.2 select element
(drop-down list)
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
3.1.3 textarea element
(Text field)
Need to specify the size of the input area
<textarea cols="100" rows="5">Indicates that the area of 5 rows and 100 columns can be input, and this element has no value attribute
3.1.4 Examples and renderings are as follows
<form action="" method="get">
<table align="center">
<caption>
<h1>注册</h1></caption>
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username" value="bluesky" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="confirmpwd" /></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
</tr>
<tr>
<td align="right">上传头像：</td>
<td>
<input type="file" name="upload" />
</td>
</tr>
</tr>
<tr>
<td align="right">居住地：</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
</td>
</tr>
</tr>
<tr>
<td align="right">个人介绍：</td>
<td>
<textarea cols="100" rows="5">
</textarea>
</td>
</tr>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
html frame tag
By using frames, you can display more than one page in the same browser window. Each HTML document is called a frame, and each frame is independent of other frames.
Disadvantages of using frames:
Developers must track more HTML documents at the same time,
it is difficult to print the entire page
4.1 frameset
Frame structure label
The frame structure tag ( <frameset>) defines how to divide the window into frames.
Each frameset defines a series of rows or
columns. The value of rows/columns specifies the area occupied by each row or column on the screen
4.2 frame
Frame label
The frame tag defines the HTML document placed in each frame.
4.3 Basic considerations
1. You can not <body></body>tag <frameset></frameset>label simultaneously
2. If a frame has a visible border, the user can drag the border to change its size. To avoid this, it is possible <frame>added tag: noresize = "noresize".
4.4 Effect picture and source code example
！--主界面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*" border="1px">
<frame src="FrameTop.html" name="topFrame" noresize="noresize" />
<frameset cols="15%,*">
<frame src="FrameLift.html" name="liftFrame" noresize="noresize"/>
<frame src="FrameRight.html" name="rigthFrame"/>
</frameset>
</frameset>
</html>
！--左侧超链接连接栏--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>a{text-decoration:none}</style>
</head>
<body>
<table width="100%" height="400px">
<tr align="center" >
<td>
<a href="a连接.html" target="rigthFrame"><font size="5">第一个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="Table.html" target="rigthFrame"><font size="5">第二个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="注册.html" target="rigthFrame"><font size="5">第三个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="综合案例.html" target="rigthFrame"><font size="5">第四个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="列表.html" target="rigthFrame"><font size="5">第五个连接</font></a>
</td>
</tr>
</table>
</body>
</html>
！--右侧显示页面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body bgcolor="aquamarine">
<div align="center">
<form action="" method="post">
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="uName" /></td>
</tr>
<tr>
<td>密码：</td>
<td> <input type="password" name="pwb" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td> <input type="password" name="qpwb" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" checked="checked" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="动漫"/>动漫
<input type="checkbox" name="hobby" value="游戏"/>游戏
<input type="checkbox" name="hobby" value="社交"/>社交
</td>
</tr>
<tr>
<td>所在地</td>
<td>
<select name="address">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>广东</option>
</select>
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea style="resize:none; height: 50px;" name="myself"></textarea>
</td>
</tr>
<tr >
<td colspan="2">
<input style="margin-left: 50px;" type="submit" name="submit"/>
<input style="margin-left: 50px;" type="reset" name="reset"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
!--顶部Hello World--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="coral">
<p align="center"><font size="7">Hello World</font></p>
</body>
</html>
Other tags and special characters of html
5.1 Other labels
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
5.2 Special characters
<Less than sign
>Greater than
&And characters
"quotation marks
®Registered
©copyright
™trademark
Space