content
2. Basic structure of HTML file
4. Common shortcut keys for Emment
1. Recognize HTML tags
HTML code is made up of "tags" .
E.g:
<body>hello</body> illustrate:
body is the tag name , which must be placed in < >
Most tags appear in pairs, <body> is the opening tag and </body> is the closing tag
A few tags only have a start tag, called a single tag
The content between the start tag and the end tag is the content of the tag, and the content of the example is hello
There may be attributes in the middle of the start tag, and the id attribute is equivalent to setting a unique identifier for this tag
E.g:
<body id="b1">hello</body>2. Basic structure of HTML file
<html>
<head>
<title>第一个html页面</title>
</head>
<body>
hello word
</body>
</html>illustrate:
The html tag is the root tag (topmost tag) of the entire html file
Write the attributes of the page in the head tag, the title tag in the example is the title
What is written in the body tag is the content displayed on the page
2.1 Running an HTML file
We can choose to create an html file in idea or in vscode, and use the "!+Tab" key to quickly generate a code frame, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Detailed explanation: (just understand, no need to do too deep research)
· <!DOCTYPE html> is called DTD (Document Definition Type), describing that the current file is an HTML5 file
· <html lang="en"> where the long attribute indicates that the current page is an "English page"
· <meta charset="UTF-8"> describes the encoding method of page characters. Without this line, it may cause Chinese garbled characters
· <meta name="viewport" content="width=device-width, initial-scale=1.0">, where viewport refers to the area on the device screen that can be used to display our web page, and the latter is in the settings available The viewport is the same width as the device width, and the initial scaling is set to no scaling.
We can write the content in the body, and then run it. I use VScode here, right-click directly, as shown in the figure:
operation result:
2.2 Label Hierarchy
· Father-son relationship · Sibling relationship
<html>
<head>
<title>第一个html页面</title>
</head>
<body>
hello word
</body>
</html>illustrate:
head, body is a sub-tag of html
title is the child tag of head, head is the parent tag of title
head, body are sibling tags
3. Common HTML tags
Annotation label
Comments are not displayed on the interface, the purpose is to improve the readability of the code
<!-- 注释 -->Shortcut keys: ctrl + / can quickly comment and uncomment
Title tags: h1-h6
There are 6, from h1-h6, the larger the number, the smaller the font
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
Paragraph tags: p
<p>床前明月光</p>
<p>疑是地上霜</p>
Notice:
There is a gap between the p tags
The paragraph described by the current p tag is not indented (will be learned later when learning css)
Line breaks at the beginning and end of html content, spaces are invalid
Multiple spaces entered between text in html are only equivalent to one space
Entering a newline directly in html will not wrap, but is equivalent to a space
newline label: br
br is a single tag
<br/> is the standard way of writing, it is not recommended to write it as <br>
举头望明月
<br/>
低头思故乡
formatting tags
Bold: strong tags, b tags
Tilt: em tags, i tags
Strikethrough: del tag, s tag
· Underscore: ins tag, u tag
<strong>strong加粗</strong>
<b>b加粗</b>
<em>em倾斜</em>
<i>i倾斜</i>
<del>del删除线</del>
<s>s删除线</s>
<ins>ins下划线</ins>
<u>u下划线</u>
Similar effects can also be achieved by using css. In actual development, css is the main method.
Image tag: img
The img tag must have the src attribute, indicating the path of the image
<img src="xxx.jpg">At this point , the image file xxx.jpg should be placed in the same level directory in html
Other attributes of img tag:
alt: replace text, when the picture cannot be displayed correctly, an alternative text will be displayed
· title: prompt text, when the mouse is placed on the picture, there will be a prompt
Width/height: Control the width and height. Generally , you can change one of the height and width, and the other will be scaled proportionally.
border: border, the parameter is the width in pixels, generally set with css'
E.g:
<img src="tiger.jpg" title="老虎" width="500px" border="5px">Notice:
Space between multiple properties
properties in no particular order
Properties are represented using the format of key-value pairs
Hyperlink Label: a
href: must have, indicating which page will jump to after clicking
target: open method, the default is _self , _blank will be opened in a new tab
example:
<a href="http://www.baidu.com">百度</a>
Click to jump to Baidu page
· Empty link: use # to place place in href
<a href="#">空连接</a>· Download link: The path corresponding to href is a file (you can use a zip file)
<a href="test.zip">下载文件</a>· Web page element links: You can add links to any element such as pictures
<a href="http://www.baidu.com"><img src="tiger.jpg"></a>· Anchor links: you can quickly locate a location on the page
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
111<br>
222
</p>
<p id="two">
333<br>
444
</p>
<p id="three">
555<br>
666
</p>Forbid a tag jump: <a href="javascript:void(0);"> or <a href="javascript:;">
table tab
table tag: indicates the entire table
tr: represents a row b of the table
td: represents a cell
th: Indicates the header cell, which will be centered and bold
thread: the head area of the table (note that it is distinguished from th, the range is larger than th)
tboday: the body area of the table
table contains tr, tr contains td or th
The table tag has some properties that can be used to set size borders, etc. These properties should be placed in the table tag
align: the alignment of the table relative to surrounding elements (not the alignment of inner elements)
border: indicates a border, 1 indicates a border (the larger the number, the thicker the border), " " indicates no border
cellpadding: the distance between the content and the border, the default is 1 pixel
cellspacing: the distance between cells, defaults to 2 pixels
width/height: set the size
example:
<table align="center" border="1" cellpadding="20" cellspacing="0"
width="500px" heigth="500px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小兰</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>19</td>
</tr>
</table>
list label
Mainly used for layout
· Unordered list: ul , li
· Ordered lists: ol , li
· Custom list, dl (total label), dt (subtitle), dd (to describe around the title)
Notice:
Elements are juxtaposed
In ul and ol tags, only li tags can be placed, and in dl tags, only dt, dd can be placed
Other tags can be placed in li
Example:
<h3>无序列表</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>小学</li>
<li>中学</li>
<li>大学</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>蔬菜：</dt>
<dd>豆腐</dd>
<dd>菠菜</dd>
<dd>西红柿</dd>
</dl>
form tag
Forms are an important way for users to enter information
Divided into two parts:
Form field: The area containing the form elements, with emphasis on the form tag
Form controls: input boxes, submit buttons, focus on the input tag
form tag
<form action="test.html">
...[form的内容]
</form>It describes the format in which the data is to be submitted and which page is to be submitted to. The form needs to be further understood in combination with the server and network programming.
input tag
Various input controls, single-line text boxes, radio buttons, checkboxes
· type, value type: button, checkbox, text, file, image, password, password, radio , etc.
name: Name the input. For radio buttons, only one with the same name can be selected
value: the default value in the input
checked: checked by default (for radio buttons, multi-select buttons)
maxlength: set the maximum length
1. Text box
<input type="text">
2. Password box
<input type="password">
3. Radio buttons
<input type="radio" name="aaa">男
<input type="radio" name="aaa">女
4. Checkbox
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打球
<input type="checkbox">跑步
5. Normal button
<input type="button" value="按钮">
6. Submit button
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
7. Clear button
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
Description: When entering content in the text box, click Clear to clear the content entered in the text box
8. Select file
<input type="file">
Description: Click to select a file to select a file from the local
label label
Used with input, clicking on the label can also select the corresponding radio/check box, which can improve the user experience
· for attribute: specify which input label with the same id corresponds to the current label
<label for="aaa">男</label>
<input id="aaa" type="radio" name="sex">
<label for="bbb">女</label>
<input id="bbb" type="radio" name="sex">
Description: Clicking on Chinese characters here can also be selected , the label label is used to achieve this function
select tag
Drop-down menu
The definition of selected="selected" in option means that it is selected by default
<select>
<option>---请选择从哪里来---</option>
<option>北京</option>
<option selected="selected">上海</option>
<option>厦门</option>
</select>
textarea tag
<textarea rows="3" cols="50">
众鸟高飞尽
孤云独去闲
相看两不厌
</textarea>
Note: The content in the text field is the default content, note that spaces will also affect
rows and cols represent rows and columns
No semantic tags: div & span
for web layout
The div tag , on its own line, is a big box
The span tag , not on a single line, is a small box
<div>
<span>猴哥</span>
<span>八戒</span>
<span>沙僧</span>
</div>
<div>
<span>汽车</span>
<span>火车</span>
<span>地铁</span>
</div>
<div>
<span>语文</span>
<span>数学</span>
<span>英语</span>
</div>
4. Common shortcut keys for Emment
· Shortcut input tab: input[tab]
· Quickly enter multiple tags: div3[tab]
· Tab with id: div#sex[tab]
· Tab with class name: div.sex[tab]
· Tab sub-element: ul>li*3[tab]
· Label with sibling elements: span+span
· Label with content: div{hello}
· Label with content with number: div{$.hello}
5. HTML special characters
Some special characters cannot be directly represented in html files, for example:
Space:
Less than sign: <
Greater than sign: >
Bitwise AND: &
<div> </div>
<div><</div>
<div>></div>
<div>&</div>
6. Summary
HTML just describes the skeleton structure of the page
Use css to further beautify the page