HTML

（一）HTML简介

HTML是用来做网页
HTML:Herpy Text MarkUp Language–超文本标记语言

（二）语法介绍

HTML是由浏览器来解析的没所以不需要安装任何编译环境

1.基本结构

<!DOCTYPE html>    <!--指示web浏览器关于页面使用使用哪个HTML版本进行编写的指令-->
<html>    <!--限定了文档的开始点和结束点-->
<head>    <!--文档头部：主要用于书写网页的设置，一般写不直接显示给用的内容--><meta charset="utf-8">    <!--字符编码的设置--><title>我的第一个网页</title>    <!--网页的标题-->
</head>
<body>    <!--文档主体：包含文档中的所有内容--><h1>hello html</h1>
</body>
</html>

body和head都是html的子标签。

2.HTML标签写法分类

双标签：<开始标签>内容</结束标签>
单标签: <标签名 />，一般写成<标签名>

3.HTML标签的属性

一般是键值对 key=”value”
属性的值必须使用双引号引起来

HTML不会报错所以注意双标签不要忘了闭合
HTML标签不区分大小写，但规范要求都是用小写

（三）HTML常用标签

1.文本标签

<!DOCTYPE html>
<html>
<head><!-- 属性值必须用双引号引起来 --><meta charset="utf-8"><title>标题标签</title>
</head>
<body><!-- <br>：换行 -->普通文本<br>普通文本2<!-- 标题标签，数字越大，标题越小  h1最好只有一个 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 转义字符 &lt;  小于号&gt;  大于号&nbsp;  空格&copy;  ©-->&lt;哈&nbsp;哈&nbsp;哈&gt; &copy;<!-- p标签：段落  双标签  自动换行 --><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p><p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><!-- 水平线 --><hr><!-- i和em都是斜体 但em有强调意义b和strong都是加粗  但strong有强调意义u  下划线--><i>hello html</i><br><em>hello html</em><br><b>hello html</b><br><strong>hello html</strong><br><u>hello html</u>
</body>
</html>

2.图片标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>图片标签</title>
</head>
<body><!-- 图片（推荐使用相对路径）title：鼠标移入的提示信息alt：图片加载失败时的替代内容--><!-- 网络资源 --><img src="https://img01.sogoucdn.com/app/a/100520021/E8930BC75295FCA0E0978B2ABB9740B4" title="上天" alt="错误"><br><!-- 本地资源 --><!-- 绝对路径 不考虑当前文件的位置 从根目录查找注意在加载图片时，在盘符前面加/ --><img src="E:\桌面\tooopen_sy_148147934918.jpg" title="向日葵" alt="找不到"><br><!-- 相对路径 ./表示当前路径 ../表示上一级路径 --><img src="./tooopen_sy_148147934918.jpg" title="向日葵" alt="找不到"><br><img src="./img/tooopen_sy_148147934918.jpg" title="向日葵" alt="找不到"><br><img src="../img/tooopen_sy_148147934918.jpg" title="向日葵" alt="找不到">
</body>
</html>

3.列表标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表标签</title>
</head>
<body><!-- 无序列表 ul:声明一个无序列表li:列表项type（了解）:默认disc  圆square  方形circle  空心圆ul中的直接子元素必须是li--><ul><li>列表项1</li><li><h1>我是标题</h1></li><li>列表项2</li><li>列表项3</li></ul><!-- 有序列表ol:声明一个有序列表li:列表项type:1  代表数字 默认就是数字a  代表小写字母A  代表大写字母i  小写的罗马数字I  大写的罗马数字start:指定从第几个开始，只能写数字--><ol type="a" start="26"><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li></ol><!-- 自定义列表dl:声明一个自定义列表dt:列表中的项目dd:描述列表中的项目--><dl><dt>我是第一</dt><dd>我是第一的说明</dd><dd>我也是第一的说明</dd><dt>我是第二</dt><dd>我是第二的说明</dd><dd>我也是第二的说明</dd></dl>
</body>
</html>

4.超链接

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>超链接</title>
</head>
<body><!-- 超链接a 页面跳转href:跳转的地址如果不给值 跳转当前页面target:_blank  新打开一个窗口，加载跳转后的页面--><a href="http://www.baidu.com" target="_blank" title="点我">点我跳转百度</a><!-- 锚点跳转到当前页面的指定位置给指定标签添加id属性a标签的href属性的值为#指定元素id属性的值--><a href="#item1" id="top">跳转到一楼</a><a href="#item2">跳转到二楼</a><a href="#item3">跳转到三楼</a><a href="#item4">跳转到四楼</a><a href="#item5">跳转到五楼</a><p id="item1" style="height: 500px;background-color: pink">一楼</p><p id="item2" style="height: 700px;background-color: red">二楼</p><p id="item3" style="height: 800px;background-color: green">三楼</p><p id="item4" style="height: 550px;background-color: blue">四楼</p><p id="item5" style="height: 900px;background-color: yellow">五楼<a href="#top">返回顶部</a></p>
</body>
</html>

跨页面超链接：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>跳转到5超链接的五楼</title>
</head>
<body><!-- 跳转到 本地html文件的指定位置--><a href="./5超链接.html#item5">跳转到5超链接.html的五楼位置</a>
</body>
</html>

5.表格标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格</title>
</head>
<body><!-- 创建一个学生表table:声明一个表格border:边框cellspacing:设置表格和表格之间的间距  **cellpadding:设置表格中内容距离当前表格边框的间距tr:声明一个行td/th:声明一个列--><!--水平对齐方式：align  **align:默认靠左对齐 left居中 center靠右对齐 right垂直对齐方式：valign  **valign: 默认垂直居中top 靠上对齐bottom 靠下对齐如果给tr设置，设置当前行的所有如果给td/th设置，设置当前的一列--><!--单元格合并  **跨行合并:rowspan:实际上是设置当前单元所占的行数，重复的需要手动删除跨列合并:colspan:实际上是设置当前单元所占的列数，重复的需要手动删除--><table border="1" cellspacing="0" width="500" height="100"><tr align="center"><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>简介</td><td>描述</td></tr><!-- 第一行 --><tr><td>1</td><td>张三</td><td rowspan="2">男</td><td>18</td><td colspan="2">貌似潘安，身高八尺</td><!-- <td>貌似潘安，身高八尺</td> --></tr><!-- 第二行 --><tr><td>2</td><td>李四</td><!-- <td>男</td> --><td>23</td><td>1</td><td>2</td></tr></table>
</body>
</html>

6.表单标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表单</title>
</head>
<body><!-- form:声明一个表单域属性：action:提交地址  如果不写，提交到当前页面method:指定提交数据的方式get:默认是get提交将数据明文显示在地址栏，相对不太安全数据大小受浏览器限制post:不会将数据明文显示在地址栏，相对安全理论上数据大小不受限制（后台可能会限制）--><!--表单的数据是要提交给后台的，提交数据的格式一般书键值对username=用户在用户名输入框输入的内容表单控件的属性：name：必须添加，作为提交数据的keyvalue：默认值（一般不用）type：指定你的控件类型text  普通文本输入框password  密码输入框radio  单选框同一组单选框的name值必须相同必须设置默认值 value属性checkbox  多选框同一组多选框的name属性的值必须相同必须设置默认值 value属性selece>option  下拉选框 option 选项select  必须添加name属性option  必须设置valuetextarea  文本域/多行文本输入框 双标签hidden  隐藏域有些数据不希望被用户看到提交按钮： type="submit"<botton></botton>单纯的按钮：在form表单域中，type="botton" 只是单纯的按钮，不提交数据--><!-- checked:设置单选框和多选框的默认选中状态selected:设置下拉选框的默认选中状态，给option设置disabled:禁用了解：type='reset'  重置按钮type='image'  图片按钮--><form>用户名：<input type="text" name="username"><br>密码：<input type="password" name="pwd"><br>性别：<input type="radio" name="gender" value="1" checked>男<input type="radio" name="gender" value="0">女<br>爱好：<input type="checkbox" name="like" value="1" checked>女<input type="checkbox" name="like" value="2">男<input type="checkbox" name="like" value="3" checked>学习<br>地址：<select name="address"><option value="0">--请选择地址--</option><option value="1">--安徽--</option><option value="2">--北京--</option></select><br>自我介绍：<textarea name="info">我是钻石王老五</textarea><br>小秘密：<input type="hidden" name="mimi" value="110"><br>提交按钮：<input type="submit" name="提交1" disabled><br><button>提交2</button><br>单纯的按钮：<input type="botton" value="按钮"><br>重置按钮：<input type="reset" value="重置"><br>图片按钮：<input type="image" src="./tooopen_sy_148147934918.jpg"></form>
</body>
</html>

7.按照标签效果分类

（1）块标签

会自动换行（独占一行）
h1-h6、p、ul、li、ol、dl、dt、dd、table、tr…

（2）行标签

不会自动换行，标签和标签并排在一行显示,没有宽高属性
i、b、u、em、strong…

（3）行内块

不会自动换行，标签和标签并排在一行显示，可以设置宽高
img、input…

8.没有默认样式的快标签和行标签

div块标签：没有默认样式，一般配合css做网页的布局
span行内标签：没有默认样式，一般也是配合css去使用

Web前端开发（一）--html基本结构，基本标签相关推荐

零基础如何掌握web前端开发技能
很多零基础学员想要进入到互联网行业都会选择web前端做首选技术语言来学习,但是学习web前端不是那么容易的,想要成为一名合格的web前端工程师,所要掌握的技能一定要会,下面小编就为大家详细的介绍一下零 ...
前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
Web前端开发标准规范
web前端开发规范的意义提高团队的协作能力提高代码的复用利用率可以写出质量更高,效率更好的代码为后期维护提供更好的支持一.命名规则命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
初学Web前端开发，你需要掌握的11项技能
你也许会觉得Web前端开发是一个很简单的工作,但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做前端开发就是先易后难,想成为一个优秀的We ...
汇总Web前端开发工程师需要注意的一些开发规范
对于正在从事Web前端开工作的人来说,了解Web前端开发规范是很重要的.因为只有这样才能保证高效快速的完成工作,今天小千就来和大家分享一下新手初学Web前端需要注意的Web前端开发规范有哪些!希望对小 ...
html透明度_学好Web前端开发，必要了解的HTML+CSS的技巧有哪些
HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CS ...

Web前端开发（一）--html基本结构，基本标签