文章目录
HTML-基础介绍
1 开发工具的介绍
1.1 编辑器
名称 | 特点 |
---|---|
Hbuilder | 打包做uniAPP开发,飞一般的代码 |
VSCode | 非常多的插件,提高开发效率 |
sublime | 简洁,插件少 |
DW | 可以拖动控件,比较省事 |
webStorm | 非常多的插件,有的是收费 |
1.2 五大主要浏览器
名称 | 浏览器内核 |
---|---|
谷歌 | webkit->blink |
火狐 | Gecko |
IE | Trident |
safari | webkit |
欧鹏 | presto->blink |
移动端的浏览器
名称 | 浏览器内核 |
---|---|
安卓 | webkit |
ios | webkit+trident |
1.3 PhotoShop(协助)
2 浏览器的内核
2.1 渲染引擎
将内容有条不紊的渲染展示在浏览器端
2.2 JS引擎
解析JavaScript代码
3 web标准
3.1 出现原因
因为浏览器的内核不同,渲染效果不同
3.2 是什么
不是单个标准,而是一个标准的集合,包含结构标准,表现标准和行为标准
结构标准:HTML标准
表现标准:CSS标准
行为标准:JS标准
3.3 作用
程序员的角度:开发一套代码即可,节省了时间与精力
公司的角度:减少成本,减少维护
浏览器的角度:方便与搜索引擎更容易找到
4 HTML骨架
4.1 定义
Hyper Text Markup Language 超文本标记语言,因为它可以加入图片、声音、动画、多媒体等内容,
不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接
4.2 骨架
文档类型
必须将文档类型设置在第一行
<!DOCTYPE html>
<!-- 当前的文档是最新的最标准的HTML5文档 -->
根标签
开始标签
<html>
头部标签
head标签中主要放置网页的一些属性
<head>
身体标签(主体)
网页中所有的内容主要都放在主题标签中
<body>
结束标签
</body>
</html>
5 标签的分类
5.1 双标签
有开始标签和结束标签,例如:html,head,title
5.2 单标签
只有开始或者结束标签,例如meta
6 标签之间的关系
6.1 嵌套关系(父子关系)
子标签相对于父标签缩一个tab键位
6.2 并列关系(兄弟关系)
7 常用的标签
7.1 标题标签(hx)
1、自动加粗变大变色
2、独占一行
3、随着x变大,字体是变小的,成反比,且1<=x<=6,x是正整数
<h1>我是标题一</h1>
<h2>我是标题二</h2>
<h3>我是标题三</h3>
<h4>我是标题四</h4>
<h5>我是标题五</h5>
<h6>我是标题六</h6>
7.2 段落标签§
1、独占一行
2、每个p都有个默认的间隔
<p>啥也不是</p>
7.3 换行标签(br)
1、可以自动换行
2、单标签
7.4 水平线标签(hr)
7.5 盒子标签(div)
1、一般用来包含其他的标签
2、用于网页的布局
3、独占一行
<div>我是一个盒子</div>
<div>我是另一个盒子</div>
7.6 范围标签(span)
1、不会换行
2、一般用来包含文本
8 结构化表现标签
8.1 文本加粗
<b></b>
<strong></strong>
8.2 文本倾斜
<i></i>
<em></em>
8.3 下划线
<u></u>
<ins></ins>
8.4 删除线
<s>¥899</s>
<del>¥599</del>
8.5区别
strong、em、ins、del这四种比b、i、u、s表现程度更深,语气更重
9 图片标签(img)
<img src="" width="300" height="200" title="" alt="" border="15">
9.1 src
图片的路径
路径:
1 线上路径
2 本地路径
2.1 绝对路径
路径是写死的,当前计算机中的死路径
2.2 相对路径
图片与当前的html文件在同一目录下:直接写图片名称即可
图片在当前的html文件上一级目录:…/图片名称
图片在当前的html文件下一级目录: 文件名称/图片名称
9.2 width
图片的宽度
9.3 height
图片的高度
9.4 title
图片的标题,当光标移上去之后,会显示title的属性值
9.5 alt
当图片不显示的时候,显示alt的属性值
9.6 border
图片的边框
10 链接标签(a)
10.1 地址属性(href)
默认的改变文本的颜色,以及添加下划线
10.2 外部链接
<a href="https://www.baidu.com" target="blank">百度一下</a>
10.3 内部链接
<a href="1-图片标签.html" target="_self">跳到图片标签</a>
10.4 未知链接
<a href="#">未知的链接</a>
10.5 打开方式
默认是在当前窗口打开
target :blank — 在新的窗口打开
target:_self ---- 在当前窗口打开
注意:
base :统一设置网页中链接的打开方式,写在头部标签中
<base target="blank">
11 锚点链接
href的属性值与id值向对应,且前边要加上#即可
<h1>喜洋洋与灰太狼</h1>
<h4><a href="one">第一集</a></h4>
<h6 id="one"><b>第一集</b></h6>
可以直接点击跳转到对应的位置
12 列表标签
12.1 无序列表
12.1.1 特点
1、是无序的
2、每个li都是独占一行的,且前边都有小点
12.1.2 代码
<ul>
<li>家用电器</li>
<li>手机/运营商/数码</li>
<li>电脑/办公</li>
<li>家具/家居/家传/厨具</li>
</ul>
12.2 有序列表
12.2.1 特点
1、有序的
2、每个li独占一行,且前边是有序的数字
12.2.2 代码
<ol>
<li>家用电器</li>
<li>手机/运营商/数码</li>
<li>电脑/办公</li>
<li>家具/家居/家传/厨具</li>
</ol>
12.3 自定义列表
12.3.1 代码
<dl>
<dt>河北省</dt>
<dd>石家庄</dd>
<dd>邯郸</dd>
<dd>沧州</dd>
<dt>福建省</dt>
<dd>漳州</dd>
<dd>厦门</dd>
<dd>福州</dd>
</dl>