HTML 基础

(Updated: )
, ,

基础语法

基础

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