HTML初识
一、网页结构初识二、标签1.文章标题标签2.段落标签3.倾斜标签4.加粗标签5.删除线6.下滑线7.上/下标签8.强制换行标签9.水平线标签三、特殊符号四、列表1.无序列表2.有序列表3.自定义列表:一、网页结构初识
<!-- doc:document 文档 type:类型 文档类型 --><!-- 声明代码类型 --><!DOCTYPE html><html lang="en"><!-- head头部 --><head><!-- 规定文件编码格式为UTF-8 UTF-8:支持中文--><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- title 网页标题 : 网页窗口标题--><!-- 网页组成: 窗口栏 地址栏 内容部分 --><title>Document</title></head><!-- body身体 --><body></body></html>
二、标签
html:超文本标记语言(学习html就是学习标记)
标记:标签(<>就是标签)、元素、盒子
标签的语法:(尖括号里第一个单词为标签名字,后面的单词为标签的属性,属性不一定要加)
1.单标签:<标签的名字 属性1=“属性值” 属性2=“属性值”…>
2.双标签<标签的名字 属性1=“属性值” 属性2=“属性值”…>内容</标签名字>
标签的结构(关系):
1.兄弟关系:并列
2.父子关系:嵌套
1.文章标题标签
h1-h6 (快捷键 h1-6+回车)
特点:双标签 h1-h6文字依次减小 默认加粗 独占一行 竖排列
2.段落标签
p (快捷键 p+回车)
特点:双标签 段落与段落之间默认有间距 竖排列
3.倾斜标签
i / em (快捷键 i+回车/快捷键 em +回车)
特点:双标签 横排列
i与em 区别:em有语气加重区别 相同状况下网页优先选择em
4.加粗标签
b /strong (快捷键b+回车) (快捷键 strong +回车)
特点:双标签 横排列
b与strong 区别:strong有语气加重区别 相同状况下网页优先选择strong
5.删除线
s / del (一般用在商品价格)
特点:双标签 横排列
s与del 区别:del有语气加重区别 相同状况下网页优先选择del
6.下滑线
u
特点:双标签 横排列
7.上/下标签
上标标签:sup
特点:双标签 横排列
下标标签:sub
特点:双标签 横排列
上标标签 <sup>2</sup>上标标签 <sup>3</sup>上标标签 <sup>4</sup> <br /> 下标标签 <sub>2</sub>下标标签 <sub>3</sub>下标标签 <sub>4</sub>
8.强制换行标签
br
特点:单标签 用来修饰所以无需写内容
9.水平线标签
hr
特点:单标签 用来修饰所以无需写内容
三、特殊符号
空格:&nbst; &emsp区别:&nbst空格小(推荐) &emsp空格大 版权符号:©商标符号:®大于号;>小于号;<
四、列表
1.无序列表
ul+li
特点:li独占一行 前有列表符号小黑点
更改列表符号:通过属性修改type="属性值"
属性值:
circle 空心圆
disc 实心圆
square 实心方块
none 清空(常用)
2.有序列表
ol+li
特点:li独占一行 前有列表排序1,2,3…
更改列表排序/起始值:通过type修改列表排序符号 type=“属性值” 通过start修改列表起始值start="起始值"
属性值:
1
A
a
i
I
例如: <ol type="A" start="3"><li>1 </li><li>2</li><li>3</li><li>4</li></ol>
3.自定义列表:
dl+dt及dd (使用场景:图文混排 dt放图片 dd放文字 )
特点:dt与dd是并列关系 dd是dt的解释说明