HTML常见标签

 

HTML常见标签

1、标题标签：

…

• 标题标签作用相当于word的标题 ，总共6课级别，取值1-6,数字越小，字体大小越小

2、分割线标签：

---

• 分隔线标签实例：

• 属性：

  • color: 设置颜色，颜色可以是颜色名或者是16进制的色号，格式#xxxxxx； 其中x表示16进制的色号值
  • size:分隔线大小取值1-7，数字越大越粗
  • width: 宽度，默认居中

3、字体标签：

• 字体实例：

4、加粗标签：

• Strong： 表示强调，并且对强调的内容加粗显示
  b: 只有加粗的效果没有强调

5、斜体标签：

• 斜体，将倾斜的内容包含在标签内

6、段落和换行标签：

 

 

• P: 表示段落标签，用于组织一大段文本，段落于段落之间默认会有一个空行。

  • 效果

• br： 换行标签，对于html会忽略空格和换行，因此需要使用换行标签来进行换行
  说明： 如果需要多个换行，就加多个换行标签

7、实体字符：  < > " ©

• &nbsp； 空格 &lt: 小于 ；&gt； 大于
  " 双引号

8、HTML注释：

• 对网页内容进行说明

span

• 主要用于包含文本，没有语义。

HTML图片标签

图片标签主要作用是通过图片的形式更直观的表达需要显示的内容。更好的呈现用户需要的效果。

img标签的语法格式：

属性解析：

• src属性：设置图片的引用路径，可以是相对路径或绝对路径，推荐使用相对路径

  • …/ : 上一级目录
  • ./ ： 当前目录
  • 绝对路径是从项目根路径开始向下的路径：如：/项目名/img/aa.jpg
  • URL路径：https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596444021094&di=c34a88135b38ac6a74403552dacec6fa&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg

• width属性：设置图片的宽度，以像素为单位

• height属性：设置图片的高度，以像素为单位

• title属性：悬浮文字，当鼠标悬浮到图片上时的提示文字

• alt属性：替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容

HTML超链接标签

超链接也成为a： 主要用于从当前页面发送请求连接到指定的地址，并响应。

语法结构：热点文字或图片

属性解析：

• href属性：访问目标的url地址

  • 超链接标签实例：

• target：定义打开页面的方式 ,常用的两种方式取值为：

  • _blank 在新的选项卡中打开；
  • _self 在本页面打开（默认）；

HTML 列表标签

无序列表 ul>li

• 无序列表

有序列表ol>li

• 有序列表

列表标签的属性 type:

特别说明：
ul和ol标签都有type属性，可以用来设置列表项前面的项目符号类型。其中ul无序列表的type取值为：disc、circle、square，默认值为disc。ol有序列表的type取值为：1、a、A、i、I，默认值为1。

HTML表格标签

table表格标签

• border：表格边框的宽度

  • 注意： 边框的的值是数字，且不需要像素的单位，数字越大越粗。

• width：表格的宽度

• height：表格的高度

• cellpadding：表格边缘与内容之间的空白

• cellspacing: 单元格之间的空白(边框和边框之间的距离)

• bgcolor：表格的背景颜色

• align：表格的对其方式如居中：center

tr

• align

  • 设置该行表格中列里面的数据居中显示

th/td

• align： 表格内容的对其方式
• colspan： 表格的列合并
• rowspan：表格中的行合并
• th的特点： 自动居中，字体默认加粗，其他和td一致

caption

• 设置表格和标题，注意放在table 标签下

HTML表单标签

HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
表单是控件的容器，一个表单由form元素、表单控件组成。

作用： 表单标签是html中用于手机用户数据，然后将收集到的数据临时保存在浏览器，发送请求提交给服务器的标签

实例展示

• 表单实例.png

表单标签：

姓名：
密码：
年龄：

1. <span style="color:#000000"><code> 邮箱：<input type="email" name="email"/><br>

2. 头像：<input type="file" name="photo"/><br>

3. <input type="hidden" value="隐藏作用域" name="test"/><br>

4. 性别：<input type="radio" name="sex" value="男" checked="checked"/>男

5. <input type="radio" name="sex" value="女" />女<br>

6. 爱好：<input type="checkbox" name="hobby" value="时间管理"/>时间管理

7. <input type="checkbox" name="hobby" value="rap" checked="checked"/>rap

8. <input type="checkbox" name="hobby" value="游泳"/>游泳

9. <input type="checkbox" name="hobby" value="王者毒药"/>王者毒药

10. <input type="checkbox" name="hobby" value="英雄联盟"/>英雄联盟<br>

11.  

12. 出生日期：<input type="date" name="birthday"/><br>

13. 学校：<select name="school">

14. <option value="1">斯坦福大学</option>

15. <option value="2" selected="selected">家里蹲大学</option>

16. <option value="3">哈弗</option>

17. <option value="4">中公教育</option>

18. </select><br>

19.  

20. <textarea name="text" cols="50" rows="30"></textarea>

21.  

22. <input type="submit" value="提交"/><br>

23. <input type="reset" value="重置" />

24. <input type="button" value="点我" />

25.  

26. <button>按钮标签</button>

27.  

28. </form>

29. </body>

30. </code></span>

• 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

• 概述：form 标签是表单标签的父标签，本身没有样式也不能收集用户数据，但是可以将子标签中的数据组织然后提交

• 属性

  • action： 用于设置数据提交到服务器的地址，相当于a标签中的href的作用

  • method： 指定提交数据的方式，常见的有get和post.,默认为get

  • enctype: 设置提交数据类型编码

    • application/x-www-form-urlencoded:在发送前编码所有字符（默认）
    • multipart/form-data:不对字符编码。

在使用包含文件上传控件的表单时，必须使用该值。

• 子标签

  • input

    • 说明： 输入域，用来收集用户数据

    • 属性

      • name:设置数据的名字，不能省略。

      • type： 设置输入域中数据的类型

        • text: 文本： 文本可见
        • password:，密码，输入的数据不可见
        • number: 表示的是数字，如：1、2、3
        • email: 邮件地址只能是邮件地址
        • file: 表示一个文件，在文件上传时，类型必须是file
        • hidden: 表示隐藏作用域，可以设置收集提交的数据，但是不能再浏览器显示，值是固定的
        • date:表示一个日期格式
        • radio: 单选按钮：只能选择一个
        • checkbox： 复选框,可以选择多个
        • submit： 将表单中的数据提交到服务器
        • reset: 重置表单中的数据
        • button: 表示一个按钮，没有特殊语义

      • value：设置输入域的默认值的。

      • 通用属性 id,class

        • id:标签的唯一标识，在一个html文件中不能重复
        • class: 表示一类标签，值可以重复

  • select

    • option

      • 下单的菜单的name写在：select；
        选择内容写在option标签中。用value设置选择标签的值
      • 默认的选中使用selected属性

  • textarea

    • 用于组织存放大量文本
    • cols: 表示文本框所占的宽度
    • rows: 表示文本框所占的高度

  • button

    • 注意： 如果将button按钮作为form表单子标签，则相当于submit