HTML基础标签

聪明的Levi

已于 2024-03-11 21:24:08 修改

阅读量264

点赞数 1

文章标签： html

于 2021-04-28 15:18:24 首次发布

本文链接：https://blog.csdn.net/weixin_51745630/article/details/116202531

版权

HTML基本标签

1.最基础的标签

在这里插入图片描述

2. 一些常用标签

（1）标题标签

在这里插入图片描述

（2）换行标签

在这里插入图片描述

（3）常用标签

在这里插入图片描述

（4）盒子标签

（div span 没有语义，相当于盒子用于放内容）
div 独占一行。（大盒子）
span （跨度跨距）（小盒子），可以连着放

在这里插入图片描述

（5）图像标签

（<img src=“ ” alt=“ ”
在这里插入图片描述

Width /height 任意选一个 另一个变量同比例缩放
两个同时修改会压缩图像。

（6）相对路径绝对路径

在这里插入图片描述

（7）链接

锚点链接是：点击链接快速定位到网页中的某个位置
在这里插入图片描述

（8）注释字符及特殊字符

注释: command + /
特殊字符：

（9）表格

在这里插入图片描述

（10）合并单元格

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

（11）关于表格

align :left/center/right :规定表格相对周围元素的对齐方式
border: 1/“” :规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding: 像素值（px)：规定单元边沿与其内容之间的空白，默认1像素
cellspacing:像素值（px）：规定单元格之间的空白默认为2像素
width：像素值（px）或百分比：规定表格的宽度

（12）无序列表

<ul>
   <li></li>
   <li></li>
   ...
</ul>

ps：

无序列表的各个列表之间没有顺序级别之分，是并列的
ul 标签只能嵌套 li标签，直接在ul标签中输入其他标签或文字是不被允许的
li标签相当于一个容器，可以容纳所有元素

（13）有序列表

<ol>
 <li></li>
 <li></li>
 ...
</ol>

ps:
1.ol标签只能嵌套li标签，直接在ol标签中输入其他标签或内容不被允许
2.li标签相当于一个容器，可容纳所有元素

（14）自定义列表

<dl>
   <dt>noun</dt>
   <dd>explanation 1</dd>
   <dd>explanation 2</dd>
   ...
</dl>

ps:

dl标签中只能包含dt&&dt标签
dt 和dd个数没有限制，经常是一个dt对应多个dd

（15）表单标签

表单域是一个包含表单元素的区域
在HTML标签中，form标签用于定义表单域
form标签会把范围内的表单元素信息提交给服务器

表单中的属性
在这里插入图片描述

ps:
（1） name和value是每个表单元素都有的属性值，主要给后台人员使用
（2）name表单元素的名字，要求单选按钮和复选框要有相同的name值
（3） checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

eg1：

<body>
//单选
学历： 高中<input type="radio" name="education">  本科<input type="radio" name="education"> 研究生<input type="radio" name="education"> 博士<input type="radio" name="education">
<br>
//多选
subject: chinese<input type="checkbox"> math<input type="checkbox"> chemistry<input type="checkbox"> Physics<input type="checkbox"> Oral English<input type="checkbox">
</body>

eg2.

<input type="submit" value ="免费注册”>
<input type="reset" value="重新填写">

（16）label 标签

label标签为input元素定义标注
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

（17）下拉标签

<select>
 <option> </option>
 <option> </option>
 ...
</select>

ps：
1.在select中至少包含一对option 标签
2.在option 中定义selected=“selected” ,当前项即为默认选中项
（18）文本标签

<textarea row="number" cols="number">
content
</;textarea>

eg:

<form>
今日反馈：
<textare cols="50" rows="5">
I'm doing my HW.
</textarea>
</form>

聪明的Levi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础标签

HTML基本标签1.最基础的标签2. 一些基础标签（1）标题标签（2）换行标签（3）常用标签（4）盒子标签（div span 没有语义，相当于盒子用于放内容）（5）图像标签（<img src=“ ” alt=“ ”Width /height 任意选一个另一个变量同比例缩放(6)相对路径绝对路径(7)链接（8）注释字符及特殊字符注释: command + /特殊字符：（9）表格...
复制链接

扫一扫