其他分享
首页 > 其他分享> > HTML-基础介绍

HTML-基础介绍

作者：互联网

文章目录

HTML-基础介绍

1 开发工具的介绍

1.1 编辑器

名称特点
Hbuilder打包做uniAPP开发,飞一般的代码
VSCode非常多的插件,提高开发效率
sublime简洁,插件少
DW可以拖动控件,比较省事
webStorm非常多的插件,有的是收费

1.2 五大主要浏览器

名称浏览器内核
谷歌webkit->blink
火狐Gecko
IETrident
safariwebkit
欧鹏presto->blink

移动端的浏览器

名称浏览器内核
安卓webkit
ioswebkit+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