本日html条记

原手写条记 

1. -------------------------------------------------------------------------------------------------------
2. 关于超链接的使用
3. <a href="https://www.luogu.com.cn/" target="_blank">
4.     //href属性指定了超链接的目标地址,即当用户点击超链接时,浏览器会跳转到这个地址。
5.     <p>测试图片超链接转向目标网站洛谷</p>
6.     <img src="../image/5082.png" alt="测试图片" width="500" height="500">
7.     //两个a标签之间的内容都可以被设置成超链接形式,包括图片和文字,或者混合。
8. </a>
9. //上述内容的效果是<p>和img标签都被设置成了超链接,当用户点击时,浏览器会跳转到href属性指定的地址。
10.     //关于<img src="../image/5082.png" alt="测试图片" width="500" height="500">的使用
11.     src属性指定了图片的路径,alt属性指定了图片的替代文本,当图片无法加载时,会显示这个文本。
12.     width和height属性指定了图片的宽度和高度。之所以能指定宽度和高度,是因为img标签是一个自闭合标签,不需要结束标签。
13.     或者说 img是个行内元素,可以设置宽度和高度。
14.     target="_blank"属性指定了超链接的打开方式,即当用户点击超链接时,浏览器会打开一个新的窗口来显示目标地址的内容。
15.     如果没有这个blank属性,则会在当前窗口打开目标地址的内容。
16. -------------------------------------------------------------------------------------------------------
17.     网页元素的分类
18.     1.块级元素:上下摆放
19.     块级元素会独占一行,可以设置宽度和高度。
20.     常见的块级元素有:div,p,h1-h6,ul,ol,li,table,form等。其中div是最常用的块级元素。
21. <div></div>
22. <p></p>
23. <h1></h1>
24. <table></table>
25. <form action=""></form>
26. 2.行内元素（内联元素）:左右摆放
27. 行内元素不会独占一行 a,b,em,i,span,strong等。设置宽高属性也不会生效。
28. <a href=""></a> <b></b> <em> </em> <i></i> <span> </span> <strong> </strong>
29. 3.行内块元素:
30. 行内块元素不会独占一行,可以设置宽度和高度,如果不设置宽度,则宽度会根据内容的宽度来决定。
31. 常见的行内块元素有:img,input,button等。
32. <img src="" alt=""> <input type="text"> <button> </button>
33. -------------------------------------------------------------------------------------------------------
34. 关于列表的话，最常用的是无序列表和有序列表。
35. 其中li是块级元素,ul是无序列表,ol是有序列表。
36. 1.有序列表:
37. 有序列表使用ol标签来定义,每个列表项使用li标签来定义。
38. 有序列表的列表项前面会有一个数字。
39. 有序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
40. <ol>
41.     <li>第一行</li>
42.     <li>第二行</li>
43. </ol>
44. 1.无序列表:
45. 无序列表使用ul标签来定义,每个列表项使用li标签来定义。
46. 无序列表的列表项前面会有一个小圆点。
47. 无序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
48. <ul>
49.     <li>第一行</li>
50.     <li>第二行</li>
51. </ul>
52. -------------------------------------------------------------------------------------------------------
53. 关于表格的话,最常用的是表格标签table。
54. 表格标签table使用tr标签来定义行,使用td标签来定义单元格。
55. 表格标签table的属性有:border,cellpadding,cellspacing,width,height等。
56. border属性指定了表格的边框,cellpadding属性指定了单元格的内边距,
57. cellspacing属性指定了单元格之间的间距,width和height属性指定了表格的宽度和高度。
58. border的参数有:
59. 1.0-10:指定边框的宽度,单位为像素。
60. cellspacing的参数有:
61. 1.0-10:指定单元格之间的间距,单位为像素。
62. width和height的参数有:
63. 1.0-100%:指定表格的宽度和高度,单位为像素或百分比。宽的百分比指的是占比当前页面的比例。
64. 1.auto:指定表格的宽度和高度,单位为像素或百分比。
65. <table border="5" cellspacing="5" width="100%" height="50">
66.     <tr>
67.         <td>第一行第一列</td>
68.         <td>第一行第二列</td>
69.         <td>第一行第三列</td>
70.     </tr>
71.     <tr>
72.         <td>第二行第一列</td>
73.         <td>第二行第二列</td>
74.         <td>第二行第三列</td>
75.     </tr>
76. </table>
77. 关于表格的特定行或特定列合并
78. 1.合并行:
79. 合并行使用rowspan属性来指定,rowspan属性的值指定了要合并的行数。
80. <table border="5" cellspacing="5" width="100%" height="50">
81.     <tr>
82.         <td rowspan="2">第一行第一列</td>
83.         //切记该属性要放在第一个td标签中,否则会无效。即需要指定合并的是哪一列的多少行。
84.         <td>第一行第二列</td>
85.         <td>第一行第三列</td>
86.     </tr>
87.     <tr>
88.         <td>第二行第二列</td>
89.         <td>第二行第三列</td>
90.     </tr>
91.     //th标签是表格的表头标签,可以用来定义表格的表头。
92.     //th标签是块级元素,可以设置宽度和高度。
93.     <tr>
94.         <th width = "500" height = "500">第三行第一列</th>//宽会影响整个表格的宽度,高只会影响该行的高度。
95.         <td>第三行第二列</td>
96.         <td>第三行第三列</td>
97.     </tr>
98. </table>
99. 2.合并列:
100. 合并列使用colspan属性来指定,colspan属性的值指定了要合并的列数。
101. <table border="5" cellspacing="5" width="100%" height="50">
102.     <tr>
103.         <td>第一行第一列</td>
104.         <td colspan="2">第一行第二列</td>
105.         //同样该属性也要放在td标签中,否则会无效。即需要指定合并需要从是该行的多那一列开始向后合并。
106.     </tr>
107.     <tr>
108.         <td>第二行第一列</td>
109.         <td>第二行第二列</td>
110.         <td>第二行第三列</td>
111.     </tr>
112. </table>
113. //无论是合并行还是合并列,都需要注意合并的初始位置,以及合并的行数或列数。最重要的是记得删除多余的td标签。
114. //比如上述例子中,第一行的第一列,向后合并2列,那么第一行的第二列就不需要了。
115. 因为位置已经被合并了。如果不及时删除,会导致表格显示错误，多余的会被挤出。
116. -------------------------------------------------------------------------------------------------------
117. 关于表单的话,最常用的是表单标签form。
118. 表单标签form使用action属性来指定表单提交的地址,使用method属性来指定表单提交的方式。
119. 表单的内容包括:输入框,下拉框,复选框,单选框,按钮等。
120. <form action="" method="">
121.     文本输入框测试 <input type="text" value = "请输入你想输入的文本">  
122.     //type属性指定了输入框的类型,text是文本输入框,
123.     如果想初始化输入框的内容,可以使用value属性来指定。
124.     text也可以改成time 或者 number等,前者只能填入时间，后者只能填入数字，并且有个小按钮可以增减数值。
125.     当然还有其他类型的输入框,比如:
126.     date 日期输入框,
127.     month 月份输入框,
128.     week 周输入框,
129.     datetime 日期时间输入框,
130.     datetime-local 本地日期时间输入框,
131.     range 范围输入框,
132.     color 颜色输入框。
133.     <input type="password">
134.     //password是密码输入框,输入的内容会被隐藏,
135.     也可以使用value属性来指定初始密码,但没啥必要。
136.     密码输入测试<input type="submit" value="这是一个按钮">
137.     //submit是提交按钮,点击后会提交表单的数据。value属性指定了按钮的文本。默认是“提交”。
138.     重置按钮测试<input type="reset"  value="点击它，所填的信息会被重置">
139.     //reset是重置按钮,点击后会重置表单的数据。value属性指定了按钮的文本。默认是“重置”。
140.     <input type="button">
141.     //button是按钮,需要用js来链接指定作用。value属性指定了按钮的文本。默认是“按钮”。
142.     选择一<input type="checkbox" name = "选择一">
143.     选择二<input type="checkbox" name = "选择二">
144.     选择三<input type="checkbox" name = "选择三">
145.     选择四<input type="checkbox" name = "选择四">
146.     默认勾选测试<input type="checkbox" name = "选择五" checked>
147.     //checkbox是复选框,可以选择多个选项。
148.     复选框的name属性指定了复选框的名称,可以使用name属性来获取复选框的值。
149.     也可以指定默认选中的复选框,可以使用checked属性来指定。例如:
150.     单选一<input type="radio" name = "1">
151.     单选二<input type="radio" name = "1">
152.     单选三<input type="radio" name = "1">
153.     单选四<input type="radio" name = "1" checked>
154.     //radio是单选框,只能选择一个选项。
155.     单选框的name属性指定了单选框的名称,可以使用name属性来获取单选框的值。
156.     也可以指定默认选中的单选框,可以使用checked属性来指定。
157.     如果name属性相同,则只能在属性相同的选项中选择一个选项，实现单选的效果。
158.     <select>
159.         <option>选项1</option>
160.         <option>选项2</option>
161.         <option>选项3</option>
162.     </select>
163.     //select是下拉框,可以选择一个选项。
164.     option是下拉框的选项,可以使用value属性来指定选项的值。
165.     也可以使用selected属性来指定默认选中的选项,默认是第一个选项。
166.     <textarea></textarea>
167.     //textarea是文本域,可以输入多行文本。
168.     这是一个按钮<button>我是个按钮</button>
169.     //button是按钮,需要用js来链接指定作用。
170. </form>
171. 按钮的长度一般都会根据文本长度会自动调整,不会超出按钮的宽度。
172. -------------------------------------------------------------------------------------------------------

复制代码

  知识点分离

  一、超链接的使用

超链接在网页中用于实现页面跳转等功能，通过 <a> 标签来创建。

解析：
href 属性指定了超链接的目标所在，当用户点击超链接时，浏览器会跳转到这个所在。target="_blank" 属性指定了超链接的打开方式，即当用户点击超链接时，浏览器会打开一个新的窗口来显示目标所在的内容；若没有该属性，则会在当前窗口打开目标所在的内容。<a> 标签之间的内容都可以被设置成超链接形式，包括图片和文字，或者混合。对于 <img> 标签，src 属性指定了图片的路径，alt 属性指定了图片的替换文本，当图片无法加载时，会显示这个文本，width 和 height 属性指定了图片的宽度和高度，img 标签是自闭合标签（行内元素）。

代码示例：

1. <a href="https://www.luogu.com.cn/" target="_blank">
2.     <p>测试图片超链接转向目标网站洛谷</p>
3.     <img src="../image/5082.png" alt="测试图片" width="500" height="500">
4. </a>

复制代码

二、网页元素的分类

网页元素主要分为块级元素、行内元素和行内块元素。

• 块级元素：上下摆放，会独占一行，可以设置宽度和高度。常见的块级元素有 div、p、h1-h6、ul、ol、li、table、form 等，此中 div 是最常用的块级元素。
  
• 行内元素（内联元素）：左右摆放，不会独占一行 ，如 a、b、em、i、span、strong 等，设置宽高属性也不会生效。
  
• 行内块元素：不会独占一行，可以设置宽度和高度，假如不设置宽度，则宽度会根据内容的宽度来决定。常见的行内块元素有 img、input、button 等。
  

1. <!-- 块级元素示例 -->
2. <div></div>
3. <p></p>
4. <h1></h1>
5. <table></table>
6. <form action=""></form>
8. <!-- 行内元素示例 -->
9. <a href=""></a>
10. <b></b>
11. <em> </em>
12. <i></i>
13. <span> </span>
14. <strong> </strong>
16. <!-- 行内块元素示例 -->
17. <img src="" alt="">
18. <input type="text">
19. <button> </button>

复制代码

三、列表的使用

列表常用的有无序列表和有序列表，li 是块级元素，ul 是无序列表，ol 是有序列表。

• 有序列表：使用 ol 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个数字，且列表项可以嵌套。
  
• 无序列表：使用 ul 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个小圆点，列表项也可以嵌套。
  

1. <!-- 有序列表示例 -->
2. <ol>
3.     <li>第一行</li>
4.     <li>第二行</li>
5. </ol>
7. <!-- 无序列表示例 -->
8. <ul>
9.     <li>第一行</li>
10.     <li>第二行</li>
11. </ul>

复制代码

四、表格的使用

最常用的表格标签是 table，使用 tr 标签来定义行，使用 td 标签来定义单元格。
table 标签的属性有 border（指定表格的边框，参数为 0-10，单元为像素）、cellpadding（指定单元格的内边距）、cellspacing（指定单元格之间的间距，参数为 0-10，单元为像素）、width 和 height（指定表格的宽度和高度，单元为像素或百分比，也可取值 auto）。合并行使用 rowspan 属性指定，值为要合并的行数，且该属性要放在第一个 td 标签中；合并列使用 colspan 属性指定，值为要合并的列数，该属性也要放在 td 标签中。th 标签是表格的表头标签，是块级元素，可以设置宽度和高度。

1. <!-- 基础表格示例 -->
2. <table border="5" cellspacing="5" width="100%" height="50">
3.     <tr>
4.         <td>第一行第一列</td>
5.         <td>第一行第二列</td>
6.         <td>第一行第三列</td>
7.     </tr>
8.     <tr>
9.         <td>第二行第一列</td>
10.         <td>第二行第二列</td>
11.         <td>第二行第三列</td>
12.     </tr>
13. </table>
15. <!-- 合并行示例 -->
16. <table border="5" cellspacing="5" width="100%" height="50">
17.     <tr>
18.         <td rowspan="2">第一行第一列</td>
19.         <td>第一行第二列</td>
20.         <td>第一行第三列</td>
21.     </tr>
22.     <tr>
23.         <td>第二行第二列</td>
24.         <td>第二行第三列</td>
25.     </tr>
26.     <tr>
27.         <th width = "500" height = "500">第三行第一列</th>
28.         <td>第三行第二列</td>
29.         <td>第三行第三列</td>
30.     </tr>
31. </table>
33. <!-- 合并列示例 -->
34. <table border="5" cellspacing="5" width="100%" height="50">
35.     <tr>
36.         <td>第一行第一列</td>
37.         <td colspan="2">第一行第二列</td>
38.     </tr>
39.     <tr>
40.         <td>第二行第一列</td>
41.         <td>第二行第二列</td>
42.         <td>第二行第三列</td>
43.     </tr>
44. </table>

复制代码

五、表单的使用

最常用的表单标签是 form，form 标签使用 action 属性来指定表单提交的所在，使用 method 属性来指定表单提交的方式。
表单的内容包括输入框、下拉框、复选框、单选框、按钮等。输入框的 type 属性指定了输入框的范例，如 text（文本输入框，可通过 value 属性初始化内容）、password（密码输入框，输入内容会被隐蔽）、submit（提交按钮，点击提交表单数据）、reset（重置按钮，点击重置表单数据）、button（普通按钮，需用 js 链接指定作用）等。checkbox 是复选框，name 属性指定名称，可通过 checked 属性指定默认选中；radio 是单选框，name 属性相同的选项只能选一个，也可通过 checked 属性指定默认选中。select 是下拉框，option 是选项，可通过 value 属性指定选项值，selected 属性指定默认选中。textarea 是文本域，可输入多行文本。

1. <form action="" method="">
2.     文本输入框测试 <input type="text" value = "请输入你想输入的文本">  
3.     <input type="password">
4.     密码输入测试<input type="submit" value="这是一个按钮">
5.     重置按钮测试<input type="reset"  value="点击它，所填的信息会被重置">
6.     <input type="button">
7.     选择一<input type="checkbox" name = "选择一">
8.     选择二<input type="checkbox" name = "选择二">
9.     选择三<input type="checkbox" name = "选择三">
10.     选择四<input type="checkbox" name = "选择四">
11.     默认勾选测试<input type="checkbox" name = "选择五" checked>
12.     单选一<input type="radio" name = "1">
13.     单选二<input type="radio" name = "1">
14.     单选三<input type="radio" name = "1">
15.     单选四<input type="radio" name = "1" checked>
16.     <select>
17.         <option>选项1</option>
18.         <option>选项2</option>
19.         <option>选项3</option>
20.     </select>
21.     <textarea></textarea>
22.     这是一个按钮<button>我是个按钮</button>
23. </form>

复制代码

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。