标签: <标签名> 用尖括号包裹标签名,分为: 双标记标签,封闭类型标签 <开始标签>内容区域</结束标签> 如:<title>我是标题</title> 单标记标签,非封闭类型标签 <标签名/> h5后单标记标签可以不加斜杠 <标签名> 如:<br/> 或者 <br> |
完整的HTML结构
<!DOCTYPE HTML> 文档类型声明 写在html文件中的第1行,告诉浏览器,当前这个文档类型是HTML 并且使用了h5的语法编写的,请用h5的规范解析 |
<html> 表示网页的开始与结束 <head> 网页的头部,定义了当前页面的一些配置信息 <title>我是标题</title> 网页的标题 <meta charset="utf-8"> 设置网页的编码为了认识中文 </head> <body> 网页的主体,所有可见的展示内容都写在这里 我是要展示的内容 </body> </html> |
HTML标签
1.文本样式的标签
<b></b> 加粗 <i></i> 斜体 <u></u> 下划线 <s>删除线文本</s> h5提供了一些带有语义的标签,通常带语义的标签更容易理解和记忆 <strong>加粗文本</strong> <em></em> 斜体 <del></del> 删除线 <mark></mark> 高亮标记 X<sup>2</sup> 上标字 Y<sub>1</sub> 下标字 |
2.换行标签
<br> 或 <br/> 单标记标签 在编辑器中敲回车是不可以让大段文字换行的,如果需要让内容换行,可以使用该标签 |
3.注释
格式 <!-- 被注释掉的内容 --> 注释就是不被浏览器解析执行的内容,它是为了解释代码用的
快捷键 Ctrl+/ 再按一次取消注释 |
4.转义符号
© 版权声明 © ® 注册商标 ® ™ 商标符号 ™ × 关闭符号/乘号 × ⊗ 带圈的关闭符号⊗ ÷;除号 ÷ < 小于号 < > 大于号 > 空格 空格折叠现象:多个空格与换行会折叠成一个空格显示 |
5.段落标签
<p></p> 自己单独成行,上下方向有垂直的行间距 lorem是用于生成假文的,先输入Lorem出现提示回车或者Tab补全均可 |
6.标题字标签
<hn></hn>n从1~6 单独成行, h1最大 h6最小,字体加粗 上下有垂直的行间距 |
7.水平分割线标签
<hr> 或者 <hr/> 单标记标签 在页面上添加一条独占一行的分割线,我们还可以设置分割线的属性 <hr color="red" size="10px"> |
8.图片
常见的图片格式:
jpg/jpeg 普通图片
png 透明图
gif 动图
webp 谷歌新出的图片格式
标签的属性和值 属性:也称为特征,用来描述标签某一方面的特点 Html定义了很多的属性和值,用来修改元素的样式和状态 写法: <开始标签 属性名1=“属性值1” 属性名2=“属性值2”></结束标签>
如:<img src="zichan2.jpg" alt="哎呀图片走丢了"/> |
<img /> 单标记标签 属性: src =“图片资源的路径/url”【必写】 url:相对路径—参照物就是当前的html文件 alt =“资源加载失败时显示的替换文字” width = “图片的宽度 单位(%或px)” height = “图片的高度 单位(%或px)” |
注意: 图片本身是有宽高的,如果设置图片宽高时的尺寸不符合图片本身的宽高比,图片会失真 失真:图片本身的比例与初始比例不符 解决方案:宽或高只写一个,另外一个会自动适应 |