html基础知识

林枭
106 阅读7分钟

什么是HTML?

超文本标记语言（英语：HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。

html1.png

HTML包含基本元素

  • <!DOCTYPE html>它是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language，是一条标示语言。其中doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

  • <html lang=en>表示该页面是html语言，并且语言为英文网站，其“lang”的意思就是“language”，语言的意思，而“en”即表示english。你的页面是中文页面，可以将其改为<html lang=zh-CN>,zh-CN 为中文简体。

  • <html> 元素是 HTML 页面的根元素。

  • <head> 元素是 HTML 页面的头部元素，必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。

  • <body> 元素是 HTML 页面的主体元素，包含了可见的页面内容。

meta标签

<meta> 元素可提供有关页面的元信息，如 

定义网页编码格式为 UTF-8。
<meta charset="UTF-8">
页面描述
<meta name=”description” content=”不超过150个字符”/> 
页面关键词者
<meta name=”keywords” content=””/>

meta viewport 是做什么用的

viewport 是对移动网页的优化

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

width：控制 viewport 的大小,如 device-width 为设备的宽度

initial-scale=1为初始缩放比例为1。 maximum-scale=1,minimum-scale=1,即不允许用户缩放。

title标签

title是元素描述了文档的标题。在head中必须存在。

link标签

<link> 定义两个链接文档之间的关系,被定义于 HTML 文档的 head 部分。

link与@import连接外部CSS文件在加载网页时的区别：加载网页时，由于读取都是从上往下的，所以碰到link会同时被加载，但@import会等页面全部加载完毕后才会被加载。那么在网速特别慢的时候就会出现闪烁的情况。

同时js在操作标签样式的时候@import中的CSS不能被js控制，所以一般情况建议使用link连接更好。

HTTP是什么?

HTTP名称

HTTP即超文本传输协议（HyperText Transfer Protocol），是一个简单的请求-响应协议。

HTTPS与HTTP有何区别

HTTPS 主要由两部分组成：HTTP + SSL / TLS，也就是在 HTTP 上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过 TLS 进行加密，所以传输的数据都是加密后的数据。

网页的组成

网页是由三个部分组成，先建立结构（html），然后通过对结构的美化渲染（css），最后进行动态效果的展现（javascript）。

浏览器如何运行

浏览器由外壳和内核组成。浏览器运行是先通过html加载css，然后渲染js完成。

内核

内核由两个部分组成：

1.渲染引擎：主要负责网页的内容，html、图像、视频、音频、css最后将他们组合成网页的方式进行显示。

2.js引擎：用来渲染js的动画效果。

常见浏览器的内核

不同的浏览器内核是不一样的，例如 1.IE浏览器内核：Trident内核；

2.火狐浏览器内核：Gecko内核；

3.Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；

4.Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；

5.Safari浏览器内核：Webkit内核；

6.360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7.搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8.百度浏览器、世界之窗内核：IE内核；

HTML常用标签

HTML标题标签

HTML标题是通过<h1>-<h6>标签定义的。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题.png

注：<h4>标签字号大小和浏览器默认字号大小一样都是16像素。最小字号标签<h6>大小为12像素。所有用标题标签包裹的文字都是进行加厚加粗的。

HTML段落标签

HTML的段落是用<P>标签定义的。

 <p>段落标签</p>

HTML链接标签

HTML的链接是通过<a>标签定义的。

<a href="https://www.baidu.com/">这是一个链接</a>

注：href属性中填入指定的链接地址。a标签中target属性定义文档显示在何处，一般默认在当前网页打开，默认值为"_self",打开新的窗口值为"_blank"。

HTML的图像标签

HTML的图像是通过<img>标签定义的。

<img src="./images/logo.png"width="300" height="120"/>

注:src属性是填写图片地址的，图片来源于网络一遍填写的是绝对定位。来源于本地就根据*.html文件跟 *.png图片所在路径位置，“./”表示同一路径，“/”为下一级，“../”为上一级。

width属性是设置图片的宽度的，height属性是设置图片高度的。alt属性是图片显示不出来时替换文本，title属性是当鼠标移动到图片上所显示的提示文本。

HTML本文格式化标签

标签描述
strong定义加粗文本
em定义倾斜文本
del定义给文本增加删除线
ins定义给与文本下划线
sub定义下标字
sup定义上标字

HTML的元素

HTML元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 开始标签与结束标签之间的内容为元素的内容
  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）

HTML的元素分类

HTML元素一般分为三类：内联元素、块级元素、空元素。

空元素

空元素一般是没有内容的，空元素是在开始标签中关闭的。常见的有<br>定义为换行、<hr>分割线、<link>定义两个链接文档之间的关系、<img>图标标签等。

空元素在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。

内联元素

内联元素只占据自己内容那么大一块空间，内联元素是跟在内联元素后面呈排队显示的，因此对内联元素的宽高设置是不起作用的。

块级元素

块级元素单独占一行，设置宽高是起作用的，但仍占据剩余部分空间。

块级元素与内联元素之间的互换

“display:block;”内联元素转换为块级元素， “display:inline;”块级元素转换为内联元素， “display:inline-block;”设置为内联块级元素。

<head>
<style>
     p {
        background-color: red;
        width: 600px;
        height: 100px;
    }
    /* 转换为内联块级元素 */
    .p1 {
        display: inline-block;
    }
    /* 转换为内联元素 */
    .p2 {
        display: inline;
    }
    strong {
        background-color: greenyellow;
        width: 600px;
        height: 100px;
    }
    /* 转换为块级元素 */
    .str {
        display: block;
    }
  </style>
</head>

<body>
  <p class="p1">1</p>
  <p class="p2">2</p>
  <strong>3</strong>
  <strong class="str">4</strong>
</body>

NEI.png

伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”，一般用冒号来表示，伪类选择器可分为两种。

（1）静态伪类：只能用于超链接的样式。如：

 ":link" 超链接点击之前
 ":visited" 链接被访问过之后

（1）动态伪类：针对所有标签都适用的样式。如：

 ":hover" 悬停：鼠标放到标签上的时候
 ":active" 激活：鼠标点击标签，但是不松手时
 ":focus" 是某个标签获得焦点时的样式（比如某个输入框里获得焦点）

HTML的隐藏与显示

通过display和visibility来实现HTML的显示与隐藏

通过display实现显示与隐藏

display:block; 用于实现显示。

display:none; 用于实现隐藏, display用来实现的隐藏元素的位置不被占用。

通过visibility实现显示与隐藏

visibility:visible; 用于实现显示

visibility:hidden; 用于实现隐藏, visibility用来实现的隐藏元素的位置仍被占用。

注:在CSS中也有通过透明度能实现显示与隐藏的，如opacity属性设置，值就是从0（完全透明）到1（完全不透明）。

HTML列表

HTML支持有序、无序和自定义列表。

<body>
    <!-- 无序列表始于 <ul 标签。每个列表项始于 <li。 -->
    <!-- 2.无序列表的type属性有三个值 disc：表示实心小圆点 circle：表示空心小圆点 square：表示实心小方块 -->
    <ul type="square">
      <li>JAVA</li>
      <li>MYSQL</li>
      <li>PHP</li>
      <li>C++</li>
    </ul>
    <!-- 有序列表始于 <ol 标签。每个列表项始于 <li 标签。 -->
    <!-- 有序列表的type属性值： type=“1”(默认) 数字排序 type=“A” 字母排序 type="|" 罗马字符排序 -->
    <!-- 有序列表的start属性：定义列表开始的序号 比如：从10开始 有序列表的value属性： 定义某个单个列表项的序列号 -->
    <ol type="1">
      <li>JAVA</li>
      <li>MYSQL</li>
      <li>PHP</li>
      <li value="13">C++</li>
      <li>C#</li>
    </ol>
    <ol start="10">
      <li>JAVA</li>
      <li>MYSQL</li>
      <li>PHP</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
      <dt>JAVA</dt>
      <dd>MYSQL</dd>
      <dd>PHP</dd>
    </dl>
  </body>

lie.png

CSS overflow 的用法

overflow 属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。
avatar
文章
阅读
粉丝