HTML 基础

基础语法

基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<!-- 文档类型申明标签,声明是 html5版本 -->
<html lang = "en">
<!-- lang 网站语言,en = English, zh-CN = China -->
<head>
<meta charset = "UTF-8">

</head>
<body>
<p>
p 是段落标签,br / 是换行标签(单标签)
strong、b 是<strong>加粗</strong>的标签
em、i 是<em>倾斜</em>的标签
del、s 是<del>删除</del>的标签
ins、u 是<ins>下划线</ins>的标签
</p>
<p>
div 是块,一个占一行
span 是块,一行可以有多个
</p>
<p>
img 标签,src 来源,alt 替换文字,title 提示文本<br />
width 设定宽度,height 设定高度(一般高度宽度二选一),border 宽度
</p>
<p>
a 超链接标签(文字图片音频都可以加超链接),属性:href = "#" 空链接,target = "_self" or "_blank" 在当前或新窗口打开<br />
锚点链接:< a href = "#two">链接到第二集</a><h3 id = "two"></h3>
</p>
</body>

特殊字符表

image-20210201225642872

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<thead id = "定义表格的头部一行">
<tr id = "行标签">
<th id = "表头单元格标签">表头单元格中的文字</th>
<th id = "表头单元格标签">表头单元格中的文字</th>
</tr>
</thead>

<tbody id = "定义表格的身体">
<tr id = "行标签">
<td id = "单元格标签">单元格中的文字</td>
<td id = "单元格标签">单元格中的文字</td>
</tr>
</tbody>
</table>

image-20210201230925873

合并单元格

跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码

写上合并方式(colspan=”2” 两个单元格列合并,rowspan 行合并) + 删除多余单元格

列表标签

无序列表

<ui> 标签表示无序列表,列表项使用 <li> 标签定义(ui 中只能放 li,但是 li 中什么都可以放)

有序列表

<ol> 有序列表,列表项使用 <li>

自定义列表

1
2
3
4
5
<dl>
<dt id = "项目">线下门店</dt>
<dd id = "描述项目">小米之家</dd>
<dd id = "描述项目">小米维修</dd>
</dl>

表单标签

表单域

image-20210201233356976

表单控件(表单元素)
input 输入表单元素

<input type="" /> 单标签

image-20210203093003989

name 是表单元素的名字,单选按钮 radio 要实现单选必须有相同的名字 name 才可以。input 中是一定要有 name 和 type 属性的

image-20210203093836801

<label for="sex">男</label> 用于绑定表单元素,使用户不用准确点击到 input 标签上即可实现选中。for 属性绑定 input 标签的 id 属性

image-20210203095435577

select 下拉表单元素
1
2
3
4
5
<select>
<option selected="selected"添加默认选定></option>
<option></option>
<option></option>
</select>
textarea 文本域元素

当用户的输入较多的时候使用 textarea,常用于留言板,评论等

1
2
3
4
<textarea cols="50" rows="5">
此处添加默认的文字,cols 是每行字符数,rows 是显示的行数。
但是实际开发是用 css 来调节的
</textarea>

emmet 语法

image-20210203200522562


tips

页面自动跳转或者刷新

<meta http-equiv="Refresh" content="3;url=http://www.ybm911.work">
3是刷新时间,单位秒。

UTF8防止乱🐎

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset=utf-8" />

<input>标签🏷️

html 标签类型属性type(file、text、radio、hidden等)详细介绍
https://www.cnblogs.com/steamed-bread/p/5020827.html

<meta>标签🏷️

<meta http-equiv="参数" content="参数变量值">
<meta http-equiv="Content-Language" content="zh-cn"/>

http-equiv:

http-equiv

<span>标签🏷️

span1

span2

span3

<embed>标签🏷️

定义前入的内容,比如插件
<embed src="helloworld.swf" />

embed

参考链接

https://blog.csdn.net/hello_word2/article/details/94834222
https://www.cnblogs.com/steamed-bread/p/5020827.html