HTML knowledge literacy

write in front

HTML is a hypertext markup language. Whether you have heard of HTML or not, you are in contact with it all the time when surfing the Internet. It is present in every corner of the Internet that you can see. In fact, for the author, I have studied this language intermittently. After time and practice, I have very little knowledge left. This time I take this opportunity to review and summarize HTML. Of course, I will not refer to the HTML language here. All the details are drawn out, and I just summarize the key points in my opinion and share my encouragement with you. Finally, I would like to add that the breadth of knowledge is beyond the reach of you and me, but we are in the current prosperous era of the Internet, and it has become inevitable to adapt to the times and change our learning thinking.

(This article will not get into the details, but will talk about it in general terms)

Common tags

Tags are an important concept in HTML, but there are many HTML tags. For those who are not focused on front-end development, just remember some common tags below. If you need to use other unfamiliar tags in a scenario, just check the documentation. It is recommended here Novice tutorial :

<!-- 注释标签 -->

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>段落标签</p>

换行单标签
<br/>

格式化标签
<strong>加粗标签</strong>
<b>b 加粗标签</b>

<em>倾斜标签</em>
<i>倾斜标签</i>

<del>删除线标签</del>
<s>删除线标签</s>

<ins>下划线标签</ins>
<u>下划线标签</u>

图片标签
<img src="图片地址" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度" border="边框">

超链接标签
1.添加链接
<a href="http://www.baidu.com">百度</a>
2.添加锚点（点击跳转）
<a href="#one">第一集</a>
	.
	.
	.
<p id="one">
   第一集剧情 <br/>
   第一集剧情 <br/>
   ...
</p>

列表标签
<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>

Special characters

For special characters in HTML, they are some characters that have special meanings or are reserved in HTML. These characters have a special purpose in HTML and may cause parsing errors or be interpreted incorrectly if used directly in an HTML document. To display it correctly in an HTML document, you must use a specific syntax format. Here are several common special characters and their corresponding syntax formats. A complete comparison table is attached at the end:

<: Less than sign (used for start tag). Corresponding entity characters: <
>: Greater than sign (used for end tags). Corresponding entity characters: >
&: ampersand (used to indicate the beginning of special characters). Corresponding entity characters: &
":double quotation mark (for attribute value quotation marks). Corresponding entity characters: "
':Single quote (used for attribute value quotes). Corresponding entity characters: '
:space. Corresponding entity characters:  
©: Copyright symbol. Corresponding entity characters:©

HTML special character encoding comparison table

table label

Tables are a very important component in HTML and are often encountered in actual operations. Let’s take a “score table” example to explain in detail:

		<!-- 表格 -->
		<table border="1px" cellspacing="0" align="center" width="350px" height="200px">
			<tr>
				<th colspan="2">成绩</th>
			</tr>
			<tr align="center">
				<td rowspan="2">语文</td>
				<td>100</td>
			</tr>
			<tr align="center">
				<td>95</td>
			</tr>
		</table>

Presentation effect:

Note:

1. To use the form first, you must first write out <table></table>the labels.
2. In the table tag: alignis the alignment of the table relative to surrounding elements, borderindicating the border, cellpaddingthe distance between the content and the border, cellspacingthe distance between cells, width / height: set size.
3. It trrepresents a row of the table, threpresents the header cell (the internal text will be bold and centered), and tdrepresents an ordinary cell.
4. trMust be nested into tabletags, th、tdMust be nested into trtags
5. rowspan="n"Indicates merging across rows, colspan="n"merging across columns

form tag

Form tags are often used in various scenarios for user input. The following is also a detailed introduction using an example:

<!-- 表单 -->
<form action="#" method="post">
	<table>
		<tr>
			<td>用户名:</td>
			<td colspan="3"><input type="text" name="username" placeholder="用户名"/></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td colspan="3"><input type="password" name="userpassword" placeholder="密码"/> </td>
		</tr>
		<tr>
			<td>性别:</td>
			<td ><input type="radio" name="sex" value="男" />男</td>
			<td><input type="radio" name="sex" value="女" />女</td>
		</tr>
		<tr>
			<td>兴趣:</td>
			<td><input type="checkbox" name="interest" value="编程"/>编程</td>
			<td><input type="checkbox" name="interest" value="书法"/>书法</td>
			<td><input type="checkbox" name="interest" value="音乐" checked/>音乐</td>
		</tr>
		<tr>
			<td>协议:</td>
			<td colspan="3">
				<textarea rows="5" cols="50" name="messege" placeholder="请在这里键入附注"></textarea>
			</td>
		</tr>
		<tr>
			<td>老家:</td>
			<td colspan="3">
				<select name="location">
					<option value ="北京">北京</option>
					<option value ="河南" selected>河南</option>
					<option value ="广东">广东</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>生日:</td>
			<td colspan="3"><input name="birthday" type="date"/></td>
		</tr>
		<tr>
			<td >体重:</td>
			<td colspan="3"><input name="weight" type="number" min = "30" max="150" placeholder="30~150"></td>
		</tr>
		<tr>
			<td>上传附件:</td>
			<td colspan="3"><input type="file" id="fileUpload" name="fileUpload"></td>
		</tr>
		<tr>
			<td><input type="submit" name="注册" value="注册"></td>
			<td colspan="3"><input type="reset" name="重置" value = "重置"></td>
		</tr>
	</table>
</form>

Presentation effect:

Note:

1. Various input controls must be placed <form></form>in labels to have actual effects.
2. The input tag represents various input controls, among which typeattributes (must exist) have many types of values, checkbox(multiple selection box), text(text box), file (upload file), password(password box), radio(radio button)
   , data(date ), number(numeric domain), etc.
3. It typealso provides three buttons, namely button(normal button), submit(submit button), and reset(clear button).
4. placeholderIs a property used to display informative text in form fields.
5. nameIndicates that inputa name has been given, especially for radioradio buttons, with the same , only nameone can be selected.
6. valueinputThe default value in the attribute , general texttext box and passwordpassword box, does not set valuea value.
7. checkedSelected by default. (for radio buttons and multi-select buttons)
8. The select tag represents a drop-down box, <option></option>and the drop-down content is filled in. optionThe middle definition selectedrepresents the default selection.
9. The textarea tag represents a text area.
10. Generally, forms are usually nested into table tags for beautiful alignment <table></table>.

No semantic tags

In actual development, we usually use two types of semantic-free tags <div></div>and <span></span>. Although semantically unsemantic, they provide an effective way to separate content from style and layout while enhancing code readability, flexibility, and extensibility.

<div></div>and <span></span>are two boxes, used for web page layout, where:

1. divIt's in its own row, and it's a big box.
2. spanIt's not on its own line, it's a small box.