HTML5语法详解，可直接运行（一篇全）

最新推荐文章于 2025-04-01 17:56:52 发布

菜鸡圣龙进化菜松鼠

最新推荐文章于 2025-04-01 17:56:52 发布

阅读量2k

点赞数 8

文章标签： html5 html css

本文链接：https://blog.youkuaiyun.com/QiaoLiu___lq/article/details/123164078

版权

Html5

1.几种关系

1.包含关系

<head>
          <title></title>
</head>

2.并列关系

<head></head>
<body></body>

2.骨架标签

<html>
     <head>
        <tltie>
         我的第一个网页
        </tetle>
     </head>
     <body>
      笑死，根本不知道写什么
     </body>
</html>

当前页面采取的是HTML5版本页面来显示网页（处于之前）

<! DOCTYPE  html>

3.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>
    标题标签
</h1>
<h2>
    标题标签

</h2>
<h3>
    标题标签
</h3>
<h4>
    标题标签
</h4>
<h5>
    标题标签
</h5>
<h6>
    标题标签
</h6>
</body>
</html>

4.段落和换行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    我是一个段落标签然后，<br/>我还要跟一个换行标签
</p>
<p>
    第二段
</p>
</body>
</html>

5.文本格式化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是<strong>加粗</strong>的文字<br/>
我是<b>加粗</b>的文字<br/>
我是<em>倾斜</em>的文字<br/>
我是<i>倾斜</i>的文字<br/>
我是<del>删除线</del>的文字<br/>
我是<s>删除线</s>的文字<br/>
我是<ins>下划线</ins>的文字<br/>
我是<u>下划线</u>的文字<br/>
</body>
</html>

6.盒子标签（对比div和span）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我是div标签，我一人独占一行</div>
<div>我是div标签，我一人独占一行</div>
<span>新浪</span>
<span>百度</span>
<span>网易</span>
</body>
</html>

7.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>图像标签</h4>
<img src="IMG_0239.bmp"/>
<h4>alt 替换文本</h4>
<img src="IMG_02390.bmp" alt = "我裂开了"/>
<h4>title 提示文本</h4>
<img src="IMG_0239.bmp" title="我是小松鼠"/>
<h4>width 给图像设置宽度</h4>
<img src="IMG_0239.bmp" title="我是小松鼠" width="500"/>
<h4>height 给图像设置高度</h4>
<img src="IMG_0239.bmp" title="我是小松鼠" height="400"/>
<h4>border 给图像设置边框</h4>
<img src="IMG_0239.bmp" title="我是小松鼠" border="15"/>
</body>
</html>

绝对路径\\\反斜杠

相对路径/斜杠

上一级表示方法：…/

8.超链接

1.外部链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_self"> 腾讯</a>
target 是打开窗口的方式，默认的值是self 当前窗口打开页面， blank是新窗口打开页面
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
</body>
</html>

2.锚点链接（快速定位道页面中的某个位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href = "#描点链接">哈哈哈哈哈</a>
<h3 id = "锚点链接"> 哈哈哈哈</h3>
</body>
</html>

9.注释标签（control+/）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这是注释标签-->
</body>
</html>

10.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>姓名</td><td>性别</td><td>年龄</td>
    </tr>
    <tr>
        <td>pink</td><td>男</td><td>30</td>
    </tr>
    <tr>
        <td>pink</td><td>男</td><td>30</td>
    </tr>
</table>
</body>
</html>

1.表头

表示表格的表头部分（剧中，加粗）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr>
        <td>pink</td><td>男</td><td>30</td>
    </tr>
    <tr>
        <td>pink</td><td>男</td><td>30</td>
    </tr>
</table>
</body>
</html>

2.表格属性

<thead></thead>
<tbody></tbody>

3.合并单元格（写前面那一个单元格）

colspan = “2”(合并两个（行）单元格）

rowspan = “2”（合并两个（列）单元格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--align="center"表示居中-->
<!--border="1" 表示 有边框-->
<!--cellspacing="0"表示 框框距离为0-->
<!--cellpadding="20"表示单元边缘与内容之间的空白-->
<!--width="500"表示宽度-->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
    <tr><td rowspan="2">pink</td><td colspan="2">男</td></tr>
    <tr><<td>男</td><td>30</td></tr>
</table>
</body>
</html>

11.无序列表

（ul只能嵌套li，但是li里面啥都能放）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>您喜欢的食物</h4>
<u1>
    <li>榴连</li>
    <li>臭豆干</li>
    <li>芒果</li>
</u1>
</body>
</html>

12.有序列表（1 2 3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>您喜欢的食物</h4>
<ol>
    <li>榴连 1000</li>
    <li>臭豆干 100</li>
    <li>芒果 10</li>
</ol>
</body>
</html>

13.自定义列表（无）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>关注我们</dt>
    <dd>新浪</dd>
    <dd>微信</dd>
    <dd>联系</dd>
</dl>
</body>
</html>

14.表单标签

（表单域表单控件或称表单元素提示信息）

1…输入的框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!--    text 文本框，用户可以在里面输入任何文字-->
    <!--    password:可以隐藏字符-->
    <!--    value就是框里的提示信息，也是其表单选择项的具体值，回返回给后台，非常重要-->
    <!--    maxlength :输入的最长长度-->
    用户名：<input type="text" value="请输入用户名" maxlength="5"> <br/>
    密码：<input type = "password" maxlength="20"></form>
</form>
</body>
</html>

2.选择的框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!--    label标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转动到对应的表单元素上,-->
    <!--    label的for属性应该与相关元素的id属性相同-->
    <!--    radio:单选-->
    <!--    name是表单元素的名字，这里的性别单选按钮必须有相同的名字name才可以实现单选。-->


    性别：<label for="nan">男</label><input type="radio" name = "sex" id = "nan">女<input type="radio" checked = "checked" name = "sex"><br/>
    <!--    checkbox:多选按钮-->
    <!--    单选框和复选框可以设置checked属性，当页面打开的时候就可以选中这个按钮-->
    爱好：吃饭<input type="checkbox" name = "hobby"> 睡觉<input type="checkbox" name = "hobby"> 打弟弟<input type="checkbox" checked ="checked" name = "hobby">
</form>
</body>
</html>

3.提交按钮

<!--submit是提交的意思，可以通过修改value值修改框的内容-->
<input type="submit" value="免费注册">

4.重置按钮

<input type="reset" value="重新填写">

5.普通按钮

<!--普通按钮，可以实现某个功能，不会给后台发送数据-->
<input type="button" value="发送验证码">

6.文件域

<!--普通按钮，可以实现某个功能，不会给后台发送数据-->
<input type="button" value="发送验证码">

7. 标签

见上选择那(选择的框)

15.下拉表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
籍贯：
<select>
<!--    默认选定状态这样写（下面这个）selected ="selected"-->
    <option selected ="selected">山东</option>
    <option>北京</option>
    <option>湖南</option>
    <option>上海</option>


</select>
</body>
</html>

16.表单元素（文本域）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
文本域标签
<textarea rows="3" cols="7">
默认文字，显示在框内
</textarea>
</body>
</html>