【HTML基础汇总】

最新推荐文章于 2024-04-18 16:28:46 发布

CHJ_1993

最新推荐文章于 2024-04-18 16:28:46 发布

阅读量2.1k

点赞数

分类专栏： html 文章标签： html 标签

本文链接：https://blog.csdn.net/qq_19815959/article/details/54175230

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 前期整体脉络

2017年1月7日 14:23:24

0.序

HTML 前期整体脉络

1. 前言：

从2016年最后的一个周开始，我开始HTML5，开始步入WEB前端行业的学习

时间很快，两个周就这样过去了，这样我们前端HTML基础入门以及CSS基础也基本上准备结束了，在这个周六、我利用一些自习时间抽空来把前面的整体脉络总结做一下笔记哈哈哈哈哈哈哈哈

2. 总览

WEB前端主要分成三大块：html 结构、css样式、js 行为。在前两周我们主要学的是HTML 以及一些CSS样式！所以下面主要写的是HTML的基础

3. HTML 基础

3.1 HTML简介

HTML 是一种超文本标记语言（英语：Hyper Text Markup Language,简称：HTML）是一种创建网页的标记语言，主要是运行在浏览器上，由浏览器来解析。主要是一些超链接，文本，图片，图像灯

HTML 指的是超文本标记语言: **H**yper**T**ext **M**arkup **L**anguage
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML** 标签及文本**内容
HTML文档也叫做* web 页面*

3.1.1 什么是标记语言

标记语言：标记语言简单的理解就是：将特定的英语放入带有”<>

3.2 HTML 基础结构

好了！程序员大部分都是以代码说话，所以先放代码再BB：

<!-- 声明文档类型 
    // 这不是一个标签
    -->
<!DOCTYPE html> 
<!--根元素-->
<html>
    <!--头部
        部分是不可见的 
        主要是用来辅助页面的功能
    -->
    <head>
        <!--页面编码设置-->
        <meta charset ='utf-8'>     
        <title>这是标题</title>
    </head>
    <!--主体-->
    <body>
        <!--这是主体内容书写的地方-->
    </body>
</html>

首先需要一个文档类型声明：<!DOCTYPE html> 这个主要是为了让浏览器当读取到这个文件时知道使用什么语言格式去解析！ 注意：文档类型声明不是一个标签
然后就是<html></html>根元素每个HTML文件的内容都需要在根元素标签内书写
接下来就是：<head></head>这是头部标签（以下使用”head区“代替），注意在head 区中大部分的内容是不可见的，可以简单的的说除了title标签内的内容其他的都可以见

里面主要包含

文档的元数据<meta>数据，在前面我们用到是的（meta）标签主要是用来设置页面的编码格式：

例子：<meta charset="utf-8">

然后head区需要的是一个title 标签这是声明文档的标题！如：<title>这是页面标题</title>

好了，head区现在主要说的就是这些了
head区下面就是我们的主要界面结构，就是我们可以在网页中可以直接看到的东西。主要是由body标签（以下简称：body区）来包裹！

3.3 标签

好了！上面说完了HTML的基本结构之后下面我们来了解以下一些简单的HTML标签

3.3.1 什么是标签

标签：HTML的标记标签的简称（英文：HTML tag）

HTML 标签是由尖括号包围的关键词：比如：< html >
标签分为两个中：分别是单标签和双标签【 <标签名>内容

3.3.2 块元素标签

块级元素标签：每个标签都会独占一行，都是从新的一行开始

3.3.2.1 h1-h6 标题标签

标题标签通常会有自身的样式：共有6级标签分别<h1></h1>到<h6></h6>

代码以及效果如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块级元素  标题元素</title>
    </head>
    <body>
        <h1>我是 1 级标题</h1>
        <h2>我是 2 级标题</h2>
        <h3>我是 3 级标题</h3>
        <h4>我是 4 级标题</h4>
        <h5>我是 5 级标题</h5>
        <h6>我是 6 级标题</h6>
    </body>
</html>

效果图：

h标签效果

(每个)HTML文件中标题标签的建议使用：

h1 标签推荐使用1次

h2 推荐使用3-5次,如果篇幅比较长可以使用5-10次

h3 应该是没有限制

3.3.2.3 p 标签 `<p>内容</p>`

p 标签：一定一段文字，独占一行

3.3.2.3 ul 和 ol

ul是无序列表

ol是有序列表通常两个都跟li一起是用,ol 默认的序号是阿拉伯数字可以通过在 ol内部是这样type 属性来设置排序的符号：可以是小写字母、大写字母、罗马数字

主要代码运用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
</head>
<body>
    <!-- 
        <ol> 有序列表
     -->
    <ol type="1">
        <li>第1行</li>
        <li>第2行</li>
        <li>第3行</li>
        <li>第4行</li>
        <li>第5行</li>
        <li>第6行</li>
        <li>第7行</li>
    </ol>
    <!-- 
        <ul> 无序列表
     -->
    <ul>
        <li>第1点</li>
        <li>第2点</li>
        <li>第3点</li>
        <li>第4点</li>
        <li>第5点</li>
    </ul>
</body>
</html>

效果图：

![ul li效果](E:\H5个人文件\图片\ul li效果.png)

块元素主要学的内容就这写

3.3.3 内联元素标签

内联元素标签不能设置宽高
宽度和高度都是有其内部的内容来撑开
代码中的换行空格会被解析

3.3.3.1 a 标签

标签定义超链接，用于从一个页面链接到另一个页面。
元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素标签</title>
</head>
<body>
    <!-- 
        href:
            路径：
        target:
            指定使用框架集中的那个框架来装载另一个资源
                _self:自身
                _blank: 新窗口
     -->
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

效果:

a标签

3.3.4 内联块元素标签

内联元素：顾名思义就是既有块元素的特性也有内联元素的特征

可以设置宽度和高度
不会独占一行
换行内容会被解析

在此我们主要将常用的【img】图像标签

3.3.4.1 img 图像标签

代码使用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联块元素</title>
    <style type="text/css">
    </style>
</head>
<body>
    <img src="img/dog.png" alt="狗狗">
    <!-- 
        src:用于图片所在的路径（绝对和相对路径都行）
        alt:1.当图片加载失败时，指定一段文本为该图片的提示信息
            2.针对SEO进行图片的解析和说明
     -->

     <img src="img/dog.png" alt="狗狗">
     <img src="img/dog.png" alt="狗狗">
</body>
</html>

效果：

如果说内联块元素既有内联元素的特性，也有块元素的特性，那么为什么不直接都用内块元素呢？

那么，下面我们就来说说内联块元素的缺点:

不会布满父元素的整个内容区域
会自身带有间隔

3.3.5 标签之间的相互转换：

内联块元素标签、内联元素标签、块元素标签如何相互转换？

通过CSS 中的一个属性来转换：因为还没说到CSS 那么我直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签之间的相互转化</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: red;
            display: inline-block;
            /*
                dispaly:;
                    1. block ：块
                    2. inline :内联
                    3. inline-block: 内联块
                    4. none:  无  让标签完全消失，系统布局时不再考虑该元素

             */
        }
    </style>
</head>
<body>
    <div>明天就要放假了！！！！</div>
    <div>明天就要放假了！！！！</div>
    <div>明天就要放假了！！！！</div>
</body>
</html>