一 。常用的html标签(电脑 查看 文件扩展名打开)
注意在写代码时,父标签与子标签之间要换行,子标签还要缩进。
h1标签,标题标签(双标签),在网页只能使用一次,一般里面放logo, h1~h6,h1权重最高,数值越高权重越低,且字体越小,字体由默认样式决定,一般会用到h1--h4,使用在网页中需要的小标题位置(标题效果处)。ediplus 工具 tool 设置默认浏览器,ctrl +b 可以直接打开网页 ,
p:段落标签(双标签),包裹文字可换行。一般放产品描述。
span:行标签,不可换行。有style属性(行内样式,没学css之前,行内样式最简单),style="color:red;"(属性值由引号包裹, 具体属性:属性值;,注意以分号结束,分号放在引号前)
span 标签赋予文字样式,在网页中担任细微工作可单纯给文字样式(做小部件)也可以装小图标
现在基本不会使用:strong标签 b 标签,因为前端准则:能用样式解决就不用标签,能用样式就不用行内属性解决
strong:强调标签(双标签),给字体加粗起强调作用。
b:加粗标签(双标签),加粗字体。
i:倾斜标签(双标签),倾斜字体,比较重要,可装小图标,阿里图标,特殊符号例如¥与文字,装图标span也行 i 也行,像轮播图的小点使用两者都可以
但装图标首先考虑i标签,装文字首先考虑span标签。
声明样式,优先级高的样式覆盖优先级低的,优先级相同,下面样式覆盖上面样式(如果样式重复声明不同值会有覆盖效果)
em:倾斜并且强调标签(双标签)
br:换行标签。(单标签),不要使用,因为不便于维护。
hr:水平分割线标签(单标签),不要使用。一般会用border 实现。
sup:上标签(双标签)
sub:下标签 (双标签)o2
以上:p span i 标签出现最多
列表标签(双标签):列表标签与列表项标签之间不能插入其他标签,li 里面可以放任意标签。
网页中列表区域 用列表标签来做,导航栏等
1. ul(无序列表标签)li(列表项标签)
list-style-type 可简写为list-style
2. ol(有序列表标签)li(列表项标签) ol 有属性 type(决定了列表项之前的标记) type="1" start="1" 数字(默认10进制数)
type="I" 或者"i" start="I" 罗马数字
type="A"或者"a" start="a"英文字母
同样的 常用:list-style:none
- 123<./li>
3.dl (自定义列表标签) 有两种子标签 :dt:列表标题 dd:列表项
- 乌拉
- 你好
显示为:乌拉
你好
img 图片标签(单标签),含四要素 src alt width height,还有title属性,title="你好",鼠标放在图片上会显示你好
(一般用这种)
(行内样式写法,px不可省)
src:资源路径,分绝对路径与相对路径,相对路径从文件自身位置开始找,./ 同级文件 ../ 返回上一层文件夹 ../../返回上上层文件夹,绝对路径会从盘符出发,右键查看文件位置,注 意不能有中文。
alt:代替文本,图片未加载时显示的就是代替文本,seo会抓取alt的关键字
width height:单位px,单位可以省略,不写width height会默认原始尺寸,写width height其中一个时,另一个会等比列缩放,最好不要两个一起写容易失真,写width height便 于浏览器加载
进入img文件夹加载01.jpg这个图片,图片未加载显示好,宽10px
图片分为三种:jpg :压缩会失真,非动态 ,较小(常用)
png:压缩不会失真,色彩多,非动态,较大(不常用,浪费性能,但是支持半透明与全透明,透明图片用png)
gif:像素低,动态
typora 的使用(开发者必会):ctrl+1~6 代表h1~h6 标题
ctrl + b加粗
ctrl+i 倾斜
```+ 回车 出现代码段 ,选择语言html 会有颜色
导出选择html 其实就是网页