HTML5快速入门语法
发表于：2022-04-19 | 分类： 计算机
字数统计: 2.3k | 阅读时长: 9分钟 | 阅读量：

HTML5快速入门语法

一、基本语法

1.前言

本文参考视频：https://www.bilibili.com/video/BV1Kg411T7t9

本文编辑器为VScode，使用!+Tab键快捷生成html骨架
　　
标签成对出现：双标签（多）

标签单个出现：单标签（少）

标签关系：包含关系和并列关系

html骨架的标签：

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，根标签
<head></head> 文档头部 注意在head标签中，我们必须设置的标签为title
<title></title> 文档标题 让网页有一个标题
<body></body> 文档主体 元素包含网页所有内容
<!DOCTYPE> 文档类型声明 告诉浏览器使用哪种HTML版本

　　

2.常用标签

2.1 标题标签

1
2
3
4
5
6
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

2.2 段落标签

1
<p>这是段落标签</p>

段落除了换行，还有一段距离

2.3 换行标签

1
<br>

2.4 水平分割线标签

1
<hr>

2.5 文本格式化标签

语义 标签 说明
加粗 <strong></strong>或者<b></b> <strong>语义更强力一点
倾斜 <em></em>或者<i></i> <em>语义更强力一点
删除线 <del></del>或者<s></s> <del>语义更强力一点
下划线 <ins></ins>或者<u ></u> <ins>语义更强力一点

2.6 图像标签

1
<img src="url">

单标签，src为<img>的必须属性，用来指定图片的路径，相对路径或绝对路径。

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图像不能显示的文字
title 文本 提示文本，鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
  • 图像可以拥有多个属性
  • 属性不分前后顺序，标签名与属性、属性与属性均以==空格==分开
  • 属性采取键值对的格式，即 属性= “属性值”

2.7 音频标签

1
<audio src="url" controls></audio>
属性 属性值 说明
src 音频路径 必须属性
controls 无 显示播放的控件
autoplay 无 自动播放（部分浏览器不支持）
loop 无 循环播放
  • 目前支持的音频格式：MP3、Wav、Ogg

2.8 视频标签

1
<video src="" controls></video>
属性 属性值 说明
src 视频路径 必须属性
controls 无 显示播放的控件
autoplay 无 自动播放（谷歌浏览器配合muted实现静音播放）
loop 无 循环播放
  • 目前支持的视频格式：MP4、WebM、Ogg

2.9 链接标签

1
<a href="url">文本或者图像</a>
属性 作用
href 用于指定链接的url地址，必须属性
target 用于指定链接页面的打开方式，其中_self为默认值(在当前窗口打开)，_blank为新窗口打开方式

根据href属性值的不同可分为：

  • 外部链接：直接的外部地址
  • 内部链接：本地的html网页文件的相对路径
  • 空链接：”#”
  • 下载链接：链接地址为一个压缩包，或者其他文件
  • 锚点链接：”#id”，通过对标题设置id，可以快速定位当前页面的某个位置

2.10 注释标签

1
<!-- 这是一段注释 -->

2.11 列表标签

作用：布局，整洁有序

  • 无序列表
    1
    2
    3
    4
    5
    6
    <!--拥有自己的属性值，不常用，都用css设置-->
    <!--ul只能有li标签，而li标签可以容纳所有标签-->
    <ul>
    	<li>列表1</li>
    	<li>列表2</li>
    </ul>
  • 有序列表
    1
    2
    3
    4
    5
    6
    <!--用css设置属性-->
    <!--ol只能有li标签，而li标签可以容纳所有标签-->
    <ol>
            <li>列表1</li>
            <li>列表2</li>
    </ol>
  • 自定义列表
    1
    2
    3
    4
    5
    6
    <!--dl只能有dt和dd，而dd和dt可以放任意标签-->  
    <!--dt与dd是兄弟关系-->  
    <dl>
            <dt>名词1</dt>
            <dd>名词解释</dd>
    </dl>

2.12 表格标签

作用：展示数据

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <thead>
    <tr>
      <th>表头1</th><th>表头2</th><th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>这是数据1</td><td>这是数据2</td><td>这是数据3</td>
    </tr>
  </tbody>
</table>
  • <table>表示一个单元格
    这些都是<table>的属性，通常不使用（用css来对表格进行修饰）
    属性名 属性值 说明
    align left、center、right 规定表格相对于周围元素的对齐方式
    border 1或”” 规定表格单元格是否拥有边框
    cellpadding 像素值 规定单元边沿与其内容之间的空白
    cellspacing 像素值 规定单元格之间的空白
    width 像素值或者百分比 规定表格宽度
  • <tr>表示一行，必须在<table>内
  • <td>表示一个单元格，必须在<tr>内
    • 属性1：合并单元格，在起始（左上方）单元格内添加属性，合并后删除多余的单元格
      跨行合并（第一行和第一行合并–>垂直合并）：rowspan = “合并单元格个数”
      跨列合并（第一列和第二列合并–>水平合并）：clospan = “合并单元格个数”
  • <th>表示表头（居中加粗），也是一共单元格，也是在<tr>内
  • <thead>表格头部区域，在<table>内
  • <tbody>表格主体区域，在<table>内
  • <tfoot>表格底部区域，在<table>内
  • <caption>表格大标题，在<table>内

2.13 表单标签

　　表单构成：表单域、表单控件、提示信息

  • 表单域<form>标签

    属性 属性值 说明
    action url地址 用于指定接收处理表单数据的服务器程序的url地址
    method get/post 用于设置表单数据的提交方式，其值为get或者post
    name 名称 用于指定表单名称，以区别同一个页面的多个表单域

  • 输入标签

    1
    2
    <!--type为必须属性，通过对type设置属性来指定控件-->
    <input type="属性值">
    type属性值 说明
    button 定义按钮
    reset 定义重置按钮，清除表单数据
    submit 定义提交按钮，提交给服务器
    image 定义图像形式的提交按钮
    checkbox 定义复选框
    radio 定义单选按钮
    file 定义输入字段，供文件上传
    hidden 定义隐藏的输入字段
    password 定义密码字段，该字段的字符被掩码
    text 定义单行输入字段
    input属性 属性值 说明
    type 自定义 定义输入类型
    name 自定义 定义input元素名称
    value 自定义 规定input元素的值
    checked checked 规定此元素首次加载时被选中
    maxlength 正整数 规定输入的最大字符长度
    placeholder 字符串 输入框提示字
    multiple 无 多个文件上传

  • 按钮标签

    1
    <button type="属性值">任意内容</button>
    type属性值 说明
    button 没有功能，配合js使用
    reset 定义重置按钮，清除表单数据
    submit 定义提交按钮，提交给服务器

  • 下拉菜单标签

    1
    2
    3
    4
    5
    6
    7
    <!--至少有一对option-->
    <!--option添加selected属性，当前为默认选项-->
    <select>
    	<option>选项1</option>
    	<option>选项2</option>
    	<option selected>选项3</option>
    </select>

  • 文本域标签

    1
    <textarea></textarea>

    属性值都用css设定不用记，在标签中间输入文字会显示在文本框中

  • 标签标签

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

    <label>标签包裹住输入标签

2.14 布局标签

div，表示分割、分区。span，表示跨区、跨距

  • <div>标签用来布局，但是一行只能放一个<div>。大盒子
  • <span>标签用来布局，一行能放多个。小盒子

2.15 字符标签

特殊字符 描述 字符代码
空格符 &nbsp；
< 小于号 &It;
> 大于号 &gt；
& 和号 &amp；
￥ 人民币 &yen；
© 版权 &copy；
® 注册商标 &reg；
° 角度 &deg；
± 正负号 &plusmn；
× 乘号 &times；
÷ 除号 &divide；
² 平方 &sup2；
³ 立方 &sup3；
前端 编程语法 HTML5
上一篇:
CSS3快速入门语法
下一篇:
英语语法

    • CopyRight © 2019 - 2025 | Powered by Hexo | Theme Bamboo