HTML基础之基本结构、标签、列表

Love The Way You Lie 2023-02-27 05:42 28阅读 0赞

### 文章目录 ###

*  HTML、CSS、JS的关系
 *  HTML版本
 *  主流浏览器及其内核
 *  HTML基本结构
 *  路径
 *  标签
 *   *  标签分类
     *  标题标签
     *  段落标签
     *  文字修饰标签
     *  换行标签
     *  图片标签
     *  音频标签
     *  视频标签
 *  HTML5去除了哪些旧标签？
 *  HTML5新增了哪些标签？
 *  HTML5新增标签在IE8中不兼容怎么办？
 *  列表
 *   *  有序列表
     *  无序列表
     *  自定义列表
 *  网络小图标
 *  超链接
 *  如何用手机浏览自己的网页？

# HTML、CSS、JS的关系 #

**HTML**是构建网页结构的->毛坯房  
**CSS**是用于美化网页、制作简单的小动画->装修房子  
**JavaScript**用于表单验证、特效、小游戏、与后端数据交互 ->拉网线

# HTML版本 #

主流版本是HTML5: 2014发布

# 主流浏览器及其内核 #

Firefox(火狐)->Gecko  
Chrome(谷歌)->Webkit->Blink  
IE(IE6,IE7,IE8,IE9,IE10,IE11)->Trident  
Opera(欧朋)->Webkit  
Safari->Webkit

# HTML基本结构 #

使用软件：Visual Studio Code

<!DOCTYPE html>
    <html>
        <head>
            <title>网页标题</title>
            <meta charset="utf-8"/>
            ...
        </head>
        <body>
        	...
        </body>
    </html>

注意事项：  
1.HTML不区分大小写  
2.所有符号用英文输入法

# 路径 #

**相对路径**：以.或…或文件夹、文件开头  
**绝对路径**：以盘符、/ 开头

# 标签 #

## 标签分类 ##

**1. 块级元素：**  
特点：可以用CSS设置宽高、独占一行（自动换行）  
比如：h1~h6、p、div  
**2. 内联元素（行内元素）**  
特点：不能设置宽高、宽高由内容大小来决定、在一行显示  
比如：b,strong,i,em,a

## 标题标签 ##

h1~h6  
h1最大、h6最小

效果：  
1.加粗  
2.大小变化  
3.语义化含义、重点的意思

## 段落标签 ##

如果有很多文字的情况下,用**p标签**进行分段

<p>
        第一段文字.....
    </p>
    <p>
        第二段文字.....
    </p>
    ...

## 文字修饰标签 ##

<span>部分文字的样式调整</span>
    <b>加粗</b>
    <i>倾斜</i>
    <strong>加粗、并且具有语义化效果</strong>
    <em>倾斜、并且具有语义化效果</em>

## 换行标签 ##

<br>

## 图片标签 ##

## 音频标签 ##

`controls`:控制条  
`autoplay`:自动播放（不稳定）  
`muted`:静音  
`loop`:单曲循环  
**单一来源：**

**多个来源：**

## 视频标签 ##

# HTML5去除了哪些旧标签？ #

# HTML5新增了哪些标签？ #

<header>描述头部信息</header>
    <footer>描述尾部信息</footer>
    <aside>侧边栏</aside>
    <nav>导航栏(菜单)</nav>
    <main>主要内容</main>
    <article>一段独立文章</article>
    <section>内容的主题</section>
    <hgroup>放一些标题(h1-h6)</hgroup>
    <time>放时间内容</time>
    <address>放地址信息</address>
    <figure>
        <figcaption>图片标题</figcaption>
        <img />
    </figure>

# HTML5新增标签在IE8中不兼容怎么办？ #

> `解决：在head中引入html5shiv.js`

# 列表 #

## 有序列表 ##

## 无序列表 ##

## 自定义列表 ##

# 网络小图标 #

# 超链接 #

<h1>A:跳转到互联网上的某个页面</h1>
    <a href="https://www.baidu.com/">百度页面</a>
    
    <h1>A:跳转到自己到其他页面</h1>
    <a href="04列表.html">跳转到列表页去</a>
    
    <h1>A:拨打电话</h1>
    <a href="tel:18729648017">打电话</a>
    
    <h1>A:发信息</h1>
    <a href="sms:18729648017">发短信</a>
    
    <h1>A:死连接</h1>
    <a href="javascript:;">死连接(点击之后不做任何行为)</a>
    
    <h1>A:跳转到页面上的某个位置(锚链接)</h1>
    <a href="XXX.html#xxx">跳转到xxx频道</a>

# 如何用手机浏览自己的网页？ #

1.  一定要用服务器形式启动网页
2.  打开CMD->ipconfig查询自己的IP
3.  用IP替换掉网页上：127.0.0.1
4.  复制整个地址到：草料二维码生成二维码
5.  手机扫一扫（和电脑保持同一个WIFI下）