HTML-基础知识

2020/7/12 HTML
1. html是超文本标记语言
2. 声明: <!DOCTYPE HTMl>标准盒子模型
3. 编码: <meta http-equiv="content-Type" content="text/html;charset=utf-8" />
4. 标题: <h1 /> ~ <h6 />
5. 段落: <p />
6. 换行: <br />
7. 水平线: <hr />
8. 保留文本格式: <pre>内容</pre>
9. html标签属性: <标签名 属性名1="属性值" 属性名2="属性值" />
10. 文字斜体: <i></i>或者<em></em>
11. 加粗: <b></b>或者<strong></strong>
12. 下标: <sub></sub>
13. 上标: <sup></sup>
14. 特殊符号: &lt; === '<'  &gt; === '>'  &reg; === '已注册'  &copy; === '版权'  &trade; === '商标'  &nbsp; === 空格
15. 无序列表: <ul><li></li></ul>,ul的type值: disc圆点(默认)、square正方形、circle空心圆
16. 有序列表: <ol><li></li></ol>,ol的type值: 1(默认)、a、A、i、I
17. 定义列表: <dl><dt>定义列表项(可多个)</dt><dd>列表项描述(可多个)</dd></dt>
18. 开发中ul和ol的编号去掉,使用图片代替
19. 图像标签: <img src="url" alt="图像显示不出来时显示的文字" height="数值或百分比" width="数值或百分比" />
20. 超链接标签: <a href="url" name="链接命名(锚名)" title="链接提示文字" target="_self(本窗口打开)/_blank(打开新窗口)">内容</a>
21. 当超链接的href的值为空时点击会刷新页面
22. 锚链接#锚名,定位锚可以没内容,锚链接不同页面时用页面名称#锚名
23. 邮件链接: <a href="mailto: 邮件地址">内容</a>
24. 文件下载: <a href="下载文件的地址">内容</a>,下载文件要压缩,直接写下载文件名会打开文件
25. src为替换元素使用,href为外部链接使用,src是引入,将当前元素进行替换,而href则是引用,用于当前文档和引用资源之间的关系建立
  1. src源于source的缩写,翻译过来是源,其作用是引入。src属性指向的内容会被嵌入到文档当前标签所在位置,
     一般出现于img、script、iframe标签属性
  2. href出自Hypertext Reference的缩写,翻译过来是超文本引用,是用于建立当前文档和引用资源之间的链接,
     一般出现于link、a标签属性
----------------------------------------------------------------------------------------------
// 表格
1. <table>
    <caption>表格标题</caption>
    <thead>
      <tr><th>表头</th></tr>
    </thead>
    <tbody>
      <tr><td>主体</td></tr>
    </tbody>
    <tfoot>
      <tr><td>脚注</td></tr>
    </tfoot>
  </table>
  <thead/><tbody/><tfoot/>用于划分结构
  <th/>用来定义表头标题(加粗居中)
  <caption/>表格标题
2. <table>属性:
    width:  px、%
    align: left、center、right // 相对于周围元素的对齐方式
    border: 1px // 表格边框宽度
    bgcolor: 表格背景颜色
    cellpadding: 单元格边沿与其内容之间的空白,px、%
    cellspacing: 单元格之间的空白,px、%
    frame: 外边框属性,void(不显示)、above()、below()、hsides(上下)、vsides(左右)、lhs()、rhs()、box/border(全部)
    rules: 内边框属性,none(没有线条)、groups(位于行组和列组之间的线条)、rows(位于行之间的线条)、cols(位于列之间的线条)、all(位于行和列之间的线条)
3. <tr>属性:
    align: left center right justify char // 水平对齐
    valign: top middle bottom baseline // 垂直对齐
    bgcolor: 背景颜色
4. <th><td>属性:
    align: left center right justify char // 水平对齐
    valign: top middle bottom baseline // 垂直对齐
    bgcolor: 背景颜色
    width:height:5. <thead><tbody><tfoot>属性:
    align: left center right justify char // 水平对齐
    valign: top middle bottom baseline // 垂直对齐
6. 跨行跨列:
    <td colspan="2" /> //所在行少一列
    <td rowspan="2" /> //跨的行少一列
7. 嵌入表格时要是完整表格结构,放在<td>标签中,用表格布局时不设置border,少使用嵌套,少使用跨行跨列
----------------------------------------------------------------------------------------------
// 表单
1.  <form>
      <input /> // 表单输入标签
      <select /> // 下拉菜单和列表标签
      <option /> // 下拉菜单和列表项目标签
      <textarea /> // 文字或标签
      <optgroup /> // 下拉菜单和列表项目分组标签
    </form>
2.  <input type="类型属性" name="名称" />
3. 类型属性: text(文字域)、password(密码域)、file(文件域)、checkbox(复选域)、radio(单选域)、button(按钮)、submit(提交按钮)、reset(重置按钮)、hidden(隐藏域)、image(图像域)
4. 单行文字域text属性: name(文字域名称)、maxlength(最大输入长度没单位)、size(文本框宽度默认20个字符没单位)、value(文本框默认值)、placeholder(提示文字)
5. radio的name值要一样,设置checked为默认选中
6. checkbox的name值可一样可不一样,同一组要一样
7. 单选复选都有value值,都可以设置checked
8. 按钮的名字由value设置
9. 图像域src图像的位置和submit一样效果
10. 隐藏域有value值
11. 下拉菜单:
    <select>
      <optgroup label="g1">
        <option>北京</option>
      </optgroup>
      <optgroup label="g2">
        <option>上海</option>
      </optgroup>
    </select>
12. <select>标签属性:
    name设置下拉菜单和列表的名称
    multiple设置可选中多个选型,没值,设置了就变成列表形式
    size设置列表中可见选型的数目,值没单位
13. <option>标签属性:
    selected设置选型初始选中状态
    value定义送往服务器的选型值
14. <optgroup>标签属性:
    label组的意思
15. 文字域
    <textarea />标签:
    name = "设置文本区的名称"
    placeholder = "设置提示文字"
    rows = "设置文本区内的可见行数没单位"
    cols = "设置文本区的可见宽度每单位"
16. <form />标签:
    action = "url" // 提交表单时向何处发送表单数据
    method = "get/post" // 设置表单以何种方式发送到指定页面
    name = "表单名称"
    target = "_self/_blank" // 在同窗口或新窗口打开
    enctype = "text/plain  application/x-www-form-urlencoded  multipart/form-data" // 在发送表单数据之前如何对其进行编码
----------------------------------------------------------------------------------------------
1. 块级标签: <div /><ul /><ol /><li/><dl/><dt/><dd/><h1 /> ~ <h6 /><p /><form /><hr />
2. 行内标签: <b /><em /><img/><input /><a /><sup/><sub /><textarea /><span />
----------------------------------------------------------------------------------------------
// 标签嵌套规则
1. 块级元素可包含行内元素和某些块级元素
2. 行内元素不能包含块元素,只能包含其他行内元素
3. 块级元素不能放在<p />标签内
4. 特殊块级元素只能包含行内元素,不能再包含块级元素
5. 块级元素与块级元素并列,行内元素和行内元素并列
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
Last Updated: 2024/6/11 14:20:38
    飘向北方
    那吾克热-NW,尤长靖