Html基本标签的使用

时间：2023-07-24 23:39:02 | 来源：网站运营

时间：2023-07-24 23:39:02 来源：网站运营

Html基本标签的使用：Html基本标签的使用

2021年3月5日

16:34

1.<h></h>标签:

h标签是容器标签，但不同级别h标签之间不能嵌套，如果嵌套就显示里面以及标签的大小，外面一级的标签在

浏览器中查看时会被放到里面一级标签的同级位置。







2.<p></p>标签和<br/>标签

</br>:换行标签，相当于回车键，上下行空袭比较少。

<p></p>：段落标签

3.文本格式化标签：(双标签)







del：在文字中间加一行横线：

常用：b,u,i,em,strong

4.图片img标签：

src路径属性：（<img src="" alt="">）

1.相对路径







2.绝对路径：

<img src="C:/Users/86188/Desktop/learn_img/html1.png" alt="">
3.网址路径：

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3250660113,3500682724&fm=26&gp=0.jpg" alt="">

title属性：鼠标点击图片时候显示的文本文字

alt属性：图片加载失败的显示的文本文字

border属性：设置边框宽度，一般用css设置

height，width属性：单设置一个属性时，图片会等比例放大缩小

5.添加音频和视频

<audio src="media/video.mp4" controls="control"></audio>

<video src="media/video.mp4"controls=""control></video>

6.超链接标签a

target属性，href属性，title属性（img标签也有）

<a href="https://lagou.com">跳转到拉钩</a>

<a target="blank" href="https://baidu.com">跳转到百度</a>

<a href="4video_audio.html" title="点击按钮跳转到原网页"><img src="images/btn.png" alt="">

</a>

7.锚点:

通过a标签实现锚点条状,需要设置跳转位置标签的id,#号是锚点的标志符号

1.页面内跳转

<a src="#+id"> 跳转到id指定的段落内容

2.跨页面跳转:<a src="sadas.html#id">

8.列表

1.ol和ul标签（ol有序，ul无序）

它们之间嵌套的是<li>标签

2.列表与列表之间可以相互嵌套，列表中加标题<h>标签时，要放到ol(ul)标签外面。

3.无序列表（dl dt dd）

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

</dl>

<dl>

<dt>王五</dt>

<dd>

<p>城市：杭州</p>

<p>学校：外国语学校</p>

<p>电话：12312</p>

</dd>

</dl>

列表的补充：







9.表格标签（table,th,tr,td）

边框属性：border:"1px" style:"border-collapse:collapse;''(将边框之间的空袭去掉)

th是表格第一行标题，自带加粗效果

例子：

<table border="1" style="border-collapse: collapse;">

<th>1</th>

<th>2</th>

<tr>

<td>姓名</td>

<td>电话</td>

<td>住址</td>

<td>学校</td>

<td>成绩</td>

</tr>

……

</table>

表格合并：（colspan:合并行，roespan:合并列）

先设计每行的表格数目（合并后的）再根据合并后表格的个数添加相应

的合并属性













表格分区：(capption，thead,tbody,th td)

caption是标题：可以写在table标签的任意一个位置，但建议写开头

代码示例如下













作业：可以将标题加粗居中，用到tr>th













10.容器标签（div 和 span）

div是大容器标签 span是小容器标签，通常加在标签的内部

11.表单制作（<form>）

基本格式如下







action后面是表单提交数据的地址，methon是数据传输的方法，name是自己定义的名字

表单元素：

<input>标签:

用户名和密码框







单选框：（属性radio）

如下示例：













注意：当设置两个单选框，且两个复选框只能点击一个复选框时候，将两个复选框

的name属性设置成相同的值。

另外input输入标签中value属性的值是设置输入框的默认值。

复选框：

在input标签属性中的type设置成checkbox

三个复选框的时候 name的属性要设置成相同的

值

代码示例：













注意：

1.单选框和多选框中checked=""checked属性是给对应的选框按钮默认打勾

2.单选框中的打勾不能取消，而多选框中的打勾可以取消掉。

按钮：

不同按钮的type属性值不同

普通按钮：button

重置按钮：reset

提交按扭：submit

图片按钮：image src="图片地址"

文件上传按扭：file

注意：file 按钮里面有一个属性multiple，设置好之后就能上传多个文件

示例如下：













12.文本域标签：(<textarea>)

文本域标签可以让文本在一个设定好的区域内展示，当超出设定的行数和列数的时候

文字就会出现滚动条。

常用属性：cols (列数) rows（行数）

代码示例：













13.下拉菜单：（<select>）

下拉菜单中包裹的标签（<optgroup>,<option>）

代码示例：













注：

option中的属性selected是默认值，optgroup中的lable标签是分组中的标签名字

下拉框中不可选择。

14.绑定标签：(<lable>)

绑定标签的作用就是将鼠标点击按钮的范围变大，点击文字的时候也能点击的到小圆圈

两种绑定方式：

1.通过id绑定：

Input中的for属性和lable中的id属性，两者之间的属性值要相等

代码示例

性别：<input type="radio" name='sex' checked="checked" id="nan"><label for="nan">男</label>







2.通过lable标签包裹绑定：

代码示例：

<label ><input type="radio" name="sex">女</label>

注意：包裹绑定的时候不要有for属性

15.html字符实体：

字符实体都是以&开头，；号结尾，且区分大小写。

常用的：

&nbsp；空格

&copy; 版权符号

&lt; 小于号

&gt; 大于号

剩下的可以在网站w3school上面查找

一个dl中可以有多个<dt><dd>标签

dd标签紧跟上一dt标签，在实际应用中的结构里

如左边

或者另外一种布局，如左边代码示例