HTML-基础介绍

2021-07-20 16:57:33 阅读：154 来源： 互联网

文章目录

HTML-基础介绍

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>

标签：浏览器,标签,基础,介绍,12.2,12.1,HTML,链接,图片
来源： https://blog.csdn.net/simplelove0519/article/details/118939265

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML-基础介绍

文章目录

HTML-基础介绍

1 开发工具的介绍

1.1 编辑器

1.2 五大主要浏览器

1.3 PhotoShop(协助)

2 浏览器的内核

2.1 渲染引擎

2.2 JS引擎

3 web标准

3.1 出现原因

3.2 是什么

3.3 作用

4 HTML骨架

4.1 定义

4.2 骨架

5 标签的分类

5.1 双标签

5.2 单标签

6 标签之间的关系

6.1 嵌套关系(父子关系)

6.2 并列关系(兄弟关系)

7 常用的标签

7.1 标题标签(hx)

7.2 段落标签§

7.3 换行标签(br)

7.4 水平线标签(hr)

7.5 盒子标签(div)

7.6 范围标签(span)

8 结构化表现标签

8.1 文本加粗

8.2 文本倾斜

8.3 下划线

8.4 删除线

8.5区别

9 图片标签(img)

9.1 src

9.2 width

9.3 height

9.4 title

9.5 alt

9.6 border

10 链接标签(a)

10.1 地址属性(href)

10.2 外部链接

10.3 内部链接

10.4 未知链接

10.5 打开方式

11 锚点链接

12 列表标签

12.1 无序列表

12.1.1 特点

12.1.2 代码

12.2 有序列表

12.2.1 特点

12.2.2 代码

12.3 自定义列表

12.3.1 代码