HTML 与HTML5 常用标签

基本结构

<!DOCTYPE html><!-- 声明当前文档是html5文档 -->
<html><!-- html,根元素 ，围堵标签--> <!-- head,头元素： 作用： 1、用于指定HTML文章中的一些元数据， 例如元数据 meta：定义页面的编码格式    title:定义页面的标题 2、引入外部的资源文件--未来讲解 --><head><meta charset="utf-8" /><title>1111</title></head><!--body，主体：浏览器显示的内容都将在这里编写 格式化代码的快捷键：ctrl+shift+f（英文状态下使用） --><body><!--定义描述标签：用于图文混编 --><dl><dt><img src="img/9fb920d819f5ea428802d311de1f2d0.jpg" width="200px" height="300px" /></dt><dd>me</dd></dl><!-- 列表标签ul-li:无序列表ol-li:有序列表--><ul><li>1</li><li>2</li></ul><ol><li>1</li><li>2</li></ol><!-- img:图片标签src:指定图片的路径相对路径：../上一级路径title:鼠标在图片上时显示文字，在图片无法打开时显示title中的文字alt与title作用相同，但有浏览器不支持，一般用titlewidth宽度height高度--><img src="img/0e04a46e108df9ba260bb0adf72686e.jpg " title="自信" width="200" height="251" /><hr color="aqua" size="6"/><!--语文本相关的标签1.标题标签六个2.段落标签<p></p>3.换行标签<br/>4.水平线标签<hr/>5.范围标签<span></span>--><h2>摸鱼儿.雁丘词</h2><p>问世间情为何物，直教人生死相许</p><p>天南地北双飞客，老翅几回寒暑。</p><p>欢乐趣，<span style="color:red;">离别苦，</span>就中更有痴儿女。<br/>君应有语，渺万里层云，千山暮雪，只影向谁去？</p><hr color="aqua" size="6" /><h1>123</h1><h2>456</h2><h3>123</h3><h4>456</h4><h5>123</h5><h6>456</h6></body>
</html>

热点区域


<!DOCTYPE html><!-- 声明当前文档是html5文档 -->
<html><!-- html,根元素 ，围堵标签--> <!-- head,头元素： 作用： 1、用于指定HTML文章中的一些元数据， 例如元数据 meta：定义页面的编码格式    title:定义页面的标题 2、引入外部的资源文件--未来讲解 --><head><meta charset="utf-8" /><title>1111</title></head><!--body，主体：浏览器显示的内容都将在这里编写 格式化代码的快捷键：ctrl+shift+f（英文状态下使用） --><body><!--定义描述标签：用于图文混编 --><dl><dt><img src="img/9fb920d819f5ea428802d311de1f2d0.jpg" width="200px" height="300px" /></dt><dd>me</dd></dl><!-- 列表标签ul-li:无序列表ol-li:有序列表--><ul><li>1</li><li>2</li></ul><ol><li>1</li><li>2</li></ol><!-- img:图片标签src:指定图片的路径相对路径：../上一级路径title:鼠标在图片上时显示文字，在图片无法打开时显示title中的文字alt与title作用相同，但有浏览器不支持，一般用titlewidth宽度height高度--><img src="img/0e04a46e108df9ba260bb0adf72686e.jpg " title="自信" width="200" height="251" /><hr color="aqua" size="6"/><!--语文本相关的标签1.标题标签六个2.段落标签<p></p>3.换行标签<br/>4.水平线标签<hr/>5.范围标签<span></span>--><h2>摸鱼儿.雁丘词</h2><p>问世间情为何物，直教人生死相许</p><p>天南地北双飞客，老翅几回寒暑。</p><p>欢乐趣，<span style="color:red;">离别苦，</span>就中更有痴儿女。<br/>君应有语，渺万里层云，千山暮雪，只影向谁去？</p><hr color="aqua" size="6" /><h1>123</h1><h2>456</h2><h3>123</h3><h4>456</h4><h5>123</h5><h6>456</h6></body>
</html>

标题标签 h1-h6, 段落标签 p , 水平线标签 hr, 有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：

不规则表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>不规则表格</title></head><body><table border="1" cellpadding="0" cellspacing="0" width="90%" height="500px"><tr align="center"><!-- colspan="3" 合并三行 --><th colspan="3">申请书</th><!-- <th></th><th></th> --></tr><tr align="center"><td>姓名</td><td>佚名</td><!-- rowspan="2"合并两列 --><td rowspan="2">个人照片</td></tr><tr align="center"><td>单位</td><td>天朝</td><!-- <td></td> --></tr></table></body>
</html>

规则表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>不规则表格</title></head><body><table border="1" cellpadding="0" cellspacing="0" width="90%" height="500px"><tr align="center"><!-- colspan="3" 合并三行 --><th colspan="3">申请书</th><!-- <th></th><th></th> --></tr><tr align="center"><td>姓名</td><td>佚名</td><!-- rowspan="2"合并两列 --><td rowspan="2">个人照片</td></tr><tr align="center"><td>单位</td><td>天朝</td><!-- <td></td> --></tr></table></body>
</html>

标题和逻辑分区

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题和逻辑分区标签</title></head><body><table border="" cellspacing="0" cellpadding="0" width="90%"><!-- caption 标题标签 --><caption>学习计划表</caption><!-- thead，tbody，tfoot逻辑分区标签 --><thead style="background-color: aliceblue;"><tr><th>时间</th><th>安排</th></tr></thead><tbody style="background-color: azure"><tr><td>早上</td><td>图书馆</td></tr><tr><td>中午</td><td>图书馆</td></tr><tr><td>晚上</td><td>自由安排</td></tr></tbody><tfoot style="background-color: blueviolet;"><tr><td colspan="2">总结</td></tr></tfoot></table></body>
</html>

超链接

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接</title></head><body><a href="hot.html" target="_search">点击跳转到其他页面</a><a href="#adress">点击跳转到本页的干得漂亮</a><a href="超2.html#2adress">点击跳转到其他页的干得漂亮</a><div style="height: 500px; background-color: lightgrey;">心情愉悦</div><div style="height: 500px; background-color: aqua;">呦呵</div><div style="height: 500px; background-color: aliceblue;">芜湖</div><div style="height: 500px; background-color: indigo;">妙哉</div><div style="height: 500px; background-color: blueviolet;"><a name="adress"></a><!--定义锚点，name自定义的-->干得漂亮</div></body>
</html>

表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>表单</h1><!-- form:用于定义表单。可以定义一个范围常用属性： action:指定提交的数据的地址（跳转的网页）methood:指定提交的方式get:请求参数会在地址栏中显示，会封装在请求中请求参数大小有限制不太安全post：请求参数不会在地址栏中显示，会封装在请求中请求参数没有有限制比较安全--><form action="dest.html" method="get" enctype="multipart/form-data"><!-- 添加表单元素，必须指定name属性 -->隐藏域：<input type="hidden" name="user" /><br /><label for="userName">用户名：</label><input type="text" id="userName" name="username" /><br /><!-- 密码框type="password"required:表示用户必须填写此内容，如果未填写，提交表单的时候失败并给出提示--><label for="passWord">密码：</label><input type="password" id="passWord" name="password" /><br /><!-- input:表单元素， 文本框 type="text",默认id：表示元素的唯一标识，最好不重复name:表单名称，未来提交数据到服务器的时候，服务器端通过name获取valueplacehoder:文本框中显示提示文字--><!-- 单选按钮：type="radio"name相同才表示同一组，且只能选择一个value:服务器通过name获取到的值就是valuechecked：表示默认选中，赋值可省略，也可写成checked="checked"-->性别：<input type="radio" name="gender"  value="男"/>男<input type="radio" name="gender" value="女" />女<input type="radio" name="gender" value="泰国" checked="checked"/>特殊<br />是否单身：<input type="radio" name="statu" value="0" checked="checked"/>是<input  type="radio" name="statu" value="1" />否<br /><!-- 复选框 type="checkbox" -->兴趣爱好：<input type="checkbox" name="hobby" value="read"/>阅读<input type="checkbox" name="hobby" value="run"/>跑步<input type="checkbox" name="hobby" value="play"/>玩<input type="checkbox" name="hobby" value="music"/>听音乐<br />头像：<input type="file" name="headimg" /><br />生日：<input type="datetime-local" name="birthday" /><br /><select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><br />协议：<textarea rows="10" cols="30" readonly="readonly">1 1. ctrl+/ 注释代码2 2. ctrl+y 恢复撤销3 3. ctrl+x 剪切4 4. ctrl+z 撤销5 5. ctrl+c 复制6 6. ctrl+p 在当前项目查找文件7 7. ctrl+f 在当前文件查找字符串8 8. ctrl+alt+f 在当前目录查找字符串9 9. ctrl+k 格式化代码10 10. ctrl+g 跳转到某行代码11 11. ctrl+o 打开文件12 12. ctrl+alt+s 保存所有文件13 13. 鼠标左键+ctrl选中多行(可进行多行修改操作)</textarea><br /><input type="submit" value="注册" /><input type="reset" value="重置" /><input type="button" value="按钮" /><input type="image" src="img/cat.jpg" /><button type="reset">重置</button></form></body>
</html>

iframe框架

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架--在浏览器上显示不止一个页面</title></head><body><p><a href="表单.html" target="content"> 表单</a><a href="http://www.baidu.com" target="content">查询</a><a href="hot.html" target="search">12</a></p><iframe name="content" src="usually.html" width="100%" height="300px" frameborder="0"></iframe><iframe name="search" src="http://www.baidu.com"  width="100%" height="300px" frameborder="0" ></iframe></body>
</html>

转义字符

 转义为空格

<转义为小于号<

≤转义为小于等于号≤

>转义为大于号>

≥转义为大于等于号≥

©转义为版权符号 ©

HTML 与HTML5 常用标签相关推荐

04-前端技术_HTML与HTML5常用标签
目录一,HTML与HTML5常用标签学前准备 1,HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定 2,HTML基础语法 2.1 HTML基本结构: ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
20-HTML与HTML5常用标签(前端)
感谢你的路过,希望学生的笔记能给你一点微不足道的参考 Java基础思维导图,完整Java体系的链接目录标题一,B/S: Browser/Server 浏览器/服务器端二, HTML 2.1. 概 ...
自学整理之HTML5常用标签和知识——小白篇
自学完后整理出来的一些内容,希望能帮到同样是小白的你们 HTML介绍编译规范常用标签块级和行内元素小知识大用处 HTML介绍超文本标记语言(Hyper Text Markup Languag ...
HTML和HTML5常用标签
文章目录 1.HTML简介 2.HTML基础语法 3.HTML文本标签 4.HTML格式化标签 5.HTML图像标签 6.HTML超链接标签 7.HTML表格标签 8.HTML表单标签 8.1.for ...
HTML与HTML5常用标签
目录学前准备一.HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定二.HTML基础语法 2.1 HTML基本结构 2.2 注释 2.3 HTML注释 ...
HTML5常用标签【知识点整理】
目录 1.HTML概念 2.HTML文档基本结构 3.HTML常用标签 3.1.标签的使用 3.2.常用标签 3.2.1.文本标签h1-p-br-hr-span 3.2.2.图片标签-img 3.2. ...
HTML5常用标签~
标签描述 header 头部 footer 尾部 nav 导航 aside 侧边栏 video 视频 aud ...
HTML5常用标签及属性
HTML常用标记一.文本标记 1.标题标记 2.字体标记 3.段落与换行标记 4.转义字符 5.文字修饰符 6.列表标记 (1)有序列表 (2)无序列表 (3)嵌套列表二.分隔线标记三.超链接标 ...

HTML 与HTML5 常用标签

基本结构

不规则表格

规则表格

标题和逻辑分区

转义字符

HTML 与HTML5 常用标签相关推荐

最新文章

热门文章