本日html条记
原手写条记-------------------------------------------------------------------------------------------------------
关于超链接的使用
<a href="https://www.luogu.com.cn/" target="_blank">
//href属性指定了超链接的目标地址,即当用户点击超链接时,浏览器会跳转到这个地址。
<p>测试图片超链接转向目标网站洛谷</p>
<img src="../image/5082.png" alt="测试图片" width="500" height="500">
//两个a标签之间的内容都可以被设置成超链接形式,包括图片和文字,或者混合。
</a>
//上述内容的效果是<p>和img标签都被设置成了超链接,当用户点击时,浏览器会跳转到href属性指定的地址。
//关于<img src="../image/5082.png" alt="测试图片" width="500" height="500">的使用
src属性指定了图片的路径,alt属性指定了图片的替代文本,当图片无法加载时,会显示这个文本。
width和height属性指定了图片的宽度和高度。之所以能指定宽度和高度,是因为img标签是一个自闭合标签,不需要结束标签。
或者说 img是个行内元素,可以设置宽度和高度。
target="_blank"属性指定了超链接的打开方式,即当用户点击超链接时,浏览器会打开一个新的窗口来显示目标地址的内容。
如果没有这个blank属性,则会在当前窗口打开目标地址的内容。
-------------------------------------------------------------------------------------------------------
网页元素的分类
1.块级元素:上下摆放
块级元素会独占一行,可以设置宽度和高度。
常见的块级元素有:div,p,h1-h6,ul,ol,li,table,form等。其中div是最常用的块级元素。
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form>
2.行内元素（内联元素）:左右摆放
行内元素不会独占一行 a,b,em,i,span,strong等。设置宽高属性也不会生效。
<a href=""></a> <b></b> <em> </em> <i></i> <span> </span> <strong> </strong>
3.行内块元素:
行内块元素不会独占一行,可以设置宽度和高度,如果不设置宽度,则宽度会根据内容的宽度来决定。
常见的行内块元素有:img,input,button等。
<img src="" alt=""> <input type="text"> <button> </button>
-------------------------------------------------------------------------------------------------------
关于列表的话，最常用的是无序列表和有序列表。
其中li是块级元素,ul是无序列表,ol是有序列表。
1.有序列表:
有序列表使用ol标签来定义,每个列表项使用li标签来定义。
有序列表的列表项前面会有一个数字。
有序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
1.无序列表:
无序列表使用ul标签来定义,每个列表项使用li标签来定义。
无序列表的列表项前面会有一个小圆点。
无序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
-------------------------------------------------------------------------------------------------------
关于表格的话,最常用的是表格标签table。
表格标签table使用tr标签来定义行,使用td标签来定义单元格。
表格标签table的属性有:border,cellpadding,cellspacing,width,height等。
border属性指定了表格的边框,cellpadding属性指定了单元格的内边距,
cellspacing属性指定了单元格之间的间距,width和height属性指定了表格的宽度和高度。
border的参数有:
1.0-10:指定边框的宽度,单位为像素。
cellspacing的参数有:
1.0-10:指定单元格之间的间距,单位为像素。
width和height的参数有:
1.0-100%:指定表格的宽度和高度,单位为像素或百分比。宽的百分比指的是占比当前页面的比例。
1.auto:指定表格的宽度和高度,单位为像素或百分比。
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
关于表格的特定行或特定列合并
1.合并行:
合并行使用rowspan属性来指定,rowspan属性的值指定了要合并的行数。
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td rowspan="2">第一行第一列</td>
//切记该属性要放在第一个td标签中,否则会无效。即需要指定合并的是哪一列的多少行。
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
//th标签是表格的表头标签,可以用来定义表格的表头。
//th标签是块级元素,可以设置宽度和高度。
<tr>
<th width = "500" height = "500">第三行第一列</th>//宽会影响整个表格的宽度,高只会影响该行的高度。
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
2.合并列:
合并列使用colspan属性来指定,colspan属性的值指定了要合并的列数。
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td>第一行第一列</td>
<td colspan="2">第一行第二列</td>
//同样该属性也要放在td标签中,否则会无效。即需要指定合并需要从是该行的多那一列开始向后合并。
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
//无论是合并行还是合并列,都需要注意合并的初始位置,以及合并的行数或列数。最重要的是记得删除多余的td标签。
//比如上述例子中,第一行的第一列,向后合并2列,那么第一行的第二列就不需要了。
因为位置已经被合并了。如果不及时删除,会导致表格显示错误，多余的会被挤出。
-------------------------------------------------------------------------------------------------------
关于表单的话,最常用的是表单标签form。
表单标签form使用action属性来指定表单提交的地址,使用method属性来指定表单提交的方式。
表单的内容包括:输入框,下拉框,复选框,单选框,按钮等。
<form action="" method="">
文本输入框测试 <input type="text" value = "请输入你想输入的文本">
//type属性指定了输入框的类型,text是文本输入框,
如果想初始化输入框的内容,可以使用value属性来指定。
text也可以改成time 或者 number等,前者只能填入时间，后者只能填入数字，并且有个小按钮可以增减数值。
当然还有其他类型的输入框,比如:
date 日期输入框,
month 月份输入框,
week 周输入框,
datetime 日期时间输入框,
datetime-local 本地日期时间输入框,
range 范围输入框,
color 颜色输入框。
<input type="password">
//password是密码输入框,输入的内容会被隐藏,
也可以使用value属性来指定初始密码,但没啥必要。
密码输入测试<input type="submit" value="这是一个按钮">
//submit是提交按钮,点击后会提交表单的数据。value属性指定了按钮的文本。默认是“提交”。
重置按钮测试<input type="reset"value="点击它，所填的信息会被重置">
//reset是重置按钮,点击后会重置表单的数据。value属性指定了按钮的文本。默认是“重置”。
<input type="button">
//button是按钮,需要用js来链接指定作用。value属性指定了按钮的文本。默认是“按钮”。
选择一<input type="checkbox" name = "选择一">
选择二<input type="checkbox" name = "选择二">
选择三<input type="checkbox" name = "选择三">
选择四<input type="checkbox" name = "选择四">
默认勾选测试<input type="checkbox" name = "选择五" checked>
//checkbox是复选框,可以选择多个选项。
复选框的name属性指定了复选框的名称,可以使用name属性来获取复选框的值。
也可以指定默认选中的复选框,可以使用checked属性来指定。例如:
单选一<input type="radio" name = "1">
单选二<input type="radio" name = "1">
单选三<input type="radio" name = "1">
单选四<input type="radio" name = "1" checked>
//radio是单选框,只能选择一个选项。
单选框的name属性指定了单选框的名称,可以使用name属性来获取单选框的值。
也可以指定默认选中的单选框,可以使用checked属性来指定。
如果name属性相同,则只能在属性相同的选项中选择一个选项，实现单选的效果。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
//select是下拉框,可以选择一个选项。
option是下拉框的选项,可以使用value属性来指定选项的值。
也可以使用selected属性来指定默认选中的选项,默认是第一个选项。
<textarea></textarea>
//textarea是文本域,可以输入多行文本。
这是一个按钮<button>我是个按钮</button>
//button是按钮,需要用js来链接指定作用。
</form>
按钮的长度一般都会根据文本长度会自动调整,不会超出按钮的宽度。
-------------------------------------------------------------------------------------------------------
知识点分离
一、超链接的使用
超链接在网页中用于实现页面跳转等功能，通过 <a> 标签来创建。
解析：
href 属性指定了超链接的目标所在，当用户点击超链接时，浏览器会跳转到这个所在。target="_blank" 属性指定了超链接的打开方式，即当用户点击超链接时，浏览器会打开一个新的窗口来显示目标所在的内容；若没有该属性，则会在当前窗口打开目标所在的内容。<a> 标签之间的内容都可以被设置成超链接形式，包括图片和文字，或者混合。对于 <img> 标签，src 属性指定了图片的路径，alt 属性指定了图片的替换文本，当图片无法加载时，会显示这个文本，width 和 height 属性指定了图片的宽度和高度，img 标签是自闭合标签（行内元素）。
代码示例：
<a href="https://www.luogu.com.cn/" target="_blank">
<p>测试图片超链接转向目标网站洛谷</p>
<img src="../image/5082.png" alt="测试图片" width="500" height="500">
</a>
二、网页元素的分类
网页元素主要分为块级元素、行内元素和行内块元素。
[*]块级元素：上下摆放，会独占一行，可以设置宽度和高度。常见的块级元素有 div、p、h1-h6、ul、ol、li、table、form 等，此中 div 是最常用的块级元素。
[*]行内元素（内联元素）：左右摆放，不会独占一行 ，如 a、b、em、i、span、strong 等，设置宽高属性也不会生效。
[*]行内块元素：不会独占一行，可以设置宽度和高度，假如不设置宽度，则宽度会根据内容的宽度来决定。常见的行内块元素有 img、input、button 等。
<!-- 块级元素示例 -->
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form>
<!-- 行内元素示例 -->
<a href=""></a>
<b></b>
<em> </em>
<i></i>
<span> </span>
<strong> </strong>
<!-- 行内块元素示例 -->
<img src="" alt="">
<input type="text">
<button> </button>
三、列表的使用
列表常用的有无序列表和有序列表，li 是块级元素，ul 是无序列表，ol 是有序列表。
[*]有序列表：使用 ol 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个数字，且列表项可以嵌套。
[*]无序列表：使用 ul 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个小圆点，列表项也可以嵌套。
<!-- 有序列表示例 -->
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
<!-- 无序列表示例 -->
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
四、表格的使用
最常用的表格标签是 table，使用 tr 标签来定义行，使用 td 标签来定义单元格。
table 标签的属性有 border（指定表格的边框，参数为 0-10，单元为像素）、cellpadding（指定单元格的内边距）、cellspacing（指定单元格之间的间距，参数为 0-10，单元为像素）、width 和 height（指定表格的宽度和高度，单元为像素或百分比，也可取值 auto）。合并行使用 rowspan 属性指定，值为要合并的行数，且该属性要放在第一个 td 标签中；合并列使用 colspan 属性指定，值为要合并的列数，该属性也要放在 td 标签中。th 标签是表格的表头标签，是块级元素，可以设置宽度和高度。
<!-- 基础表格示例 -->
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<!-- 合并行示例 -->
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<th width = "500" height = "500">第三行第一列</th>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
<!-- 合并列示例 -->
<table border="5" cellspacing="5" width="100%" height="50">
<tr>
<td>第一行第一列</td>
<td colspan="2">第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
五、表单的使用
最常用的表单标签是 form，form 标签使用 action 属性来指定表单提交的所在，使用 method 属性来指定表单提交的方式。
表单的内容包括输入框、下拉框、复选框、单选框、按钮等。输入框的 type 属性指定了输入框的范例，如 text（文本输入框，可通过 value 属性初始化内容）、password（密码输入框，输入内容会被隐蔽）、submit（提交按钮，点击提交表单数据）、reset（重置按钮，点击重置表单数据）、button（普通按钮，需用 js 链接指定作用）等。checkbox 是复选框，name 属性指定名称，可通过 checked 属性指定默认选中；radio 是单选框，name 属性相同的选项只能选一个，也可通过 checked 属性指定默认选中。select 是下拉框，option 是选项，可通过 value 属性指定选项值，selected 属性指定默认选中。textarea 是文本域，可输入多行文本。
<form action="" method="">
文本输入框测试 <input type="text" value = "请输入你想输入的文本">
<input type="password">
密码输入测试<input type="submit" value="这是一个按钮">
重置按钮测试<input type="reset"value="点击它，所填的信息会被重置">
<input type="button">
选择一<input type="checkbox" name = "选择一">
选择二<input type="checkbox" name = "选择二">
选择三<input type="checkbox" name = "选择三">
选择四<input type="checkbox" name = "选择四">
默认勾选测试<input type="checkbox" name = "选择五" checked>
单选一<input type="radio" name = "1">
单选二<input type="radio" name = "1">
单选三<input type="radio" name = "1">
单选四<input type="radio" name = "1" checked>
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<textarea></textarea>
这是一个按钮<button>我是个按钮</button>
</form>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]