Day44 html结构/标签/规范

目录

HTML介绍

HTML

HTML全称 HyperText Mackeup Language ,超文本标记语言

什么是超文本

比如网页的超链接、图片、音频、视频都称为超文本

HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

打开pycharm, 我们可以新建一个HTML File文件, pycharm会自动为我们创建好HTML格式

接下来我们一点点剖析这段代码

文档声明头

准确的说,!DOCTYPE html并不是HTML标签,它是指明了该页面使用哪个HTML版本进行编译

html标签

<html></html>是文档的开始标记和结束的标记.是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)

head标签

<head></head>定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据

title标签

<title></title>定义了网页标题，在浏览器标题栏显示.

body标签

<body></body> 之间的文本是可见的网页主体内容 .

HTML的规范与注释

HTML的规范

  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(win32时代，系统只能识别3位扩展名时使用的。现在一般都使用.html
  • HTML的结构
    • 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准,是HTML5标准
    • head部分：将页面的一些额外信息告诉服务器,不会显示在页面上
    • body部分：我们所写的代码必须放在此标签內

HTML注释

<!--单行注释-->

  • 给自己看。随着页面的内容越多，高效的注释能让我们的代码更易阅读，并且关键性的代码我们可以用注释标注出来
  • 给别人看。比如自己写的html代码，有的地方代码需要说明一下，同时要转给别人看和解读分析的，这个时候就有必要使用html注释

head中相关标签

head标签中的相关标签是用户看不到的,仅仅是对应用于网页的一些基础信息

head内常用标签

标签 意义
<title></title> 定义网页标题
<stytle></stytle> 定义内部样式表
<script></script> 定义JS代码或引入内部JS文件
<link/> 引入外部样式表文件或网站图标
<meta/> 定义网页原信息

meta标签的组成

  • <meta> 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词
  • <meta> 标签位于文档的头部，不包含任何内容
  • <meta> 提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://https://www.cnblogs.com/2222bai">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="博客园是一家很实用IT学习网站">

body中相关标签

body中基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平分割线-->
<hr>

body中特殊字符

内容 对应代码
空格 &nbsp;

|&gt;
<|&lt;
&|&amp;
￥|&yen;
版权|&copy;
注册|&reg;

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现

块级元素和行内元素的区别:

所谓块元素,是另起一行开始渲染的元素,行内元素则不需另起一行.如果单独在网页中插入这两个元素,不会对页面产生任何影响

这两个元素是专门为定义CSS而生的

注意:

关于标签嵌套:通常块级元素可以包含内联元素某些块级元素,但内联元素不能包含块级元素,它只能包含其他内联元素

p标签不能包含块级标签,p标签也不能包含p标签

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

超链接标签

所谓的超链接就是指从一个网页指向一个目标的连接地址.这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

链接功能:

<a href="www.baidu.com" target="_blank">点我</a>

target:

  • _blank表示在新建标签页中打开网页
  • _self表示在当前标签页中打开网页

锚点功能:

<!--<a href="" id="a1">文章开头</a>-->
<!--<div style="background-color: red;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="" id="a2">文章中部</a>-->
<!--<div style="background-color: black;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="#a1">回到顶部</a>-->
<!--<a href="#a2">回到中部</a>-->

列表

无序列表

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>

type属性:

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

有序列表

<ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性:

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

表格

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构:

<table border="1">  <!--表格边框-->
    <thead>
        <tr >
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
            <th>is_delete</th>
        </tr>
    </thead>  <!--表头-->
    <tbody>
        <tr >
            <td rowspan="2">jason</td>  <!--当前列向下合并2行数据-->
            <td>123</td>
            <td>study</td>
            <td>0</td>
        </tr>
        <tr>
            <!--<td>tank</td>-->
            <td>444</td>
            <td>DBJ</td>
            <td>1</td>
        </tr>
        <tr>
            <td>echo</td>
            <td colspan="2">333</td>  <!--当前行向后合并2列数据-->
            <!--<td>movie</td>-->
            <td>1</td>
        </tr>
    </tbody>  <!--表数据-->
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/2222bai/p/11845527.html