HTML超文本标记语言

chonger_feifei

已于 2022-03-28 16:44:08 修改

阅读量305

点赞数

分类专栏： HTML 文章标签： html5

于 2022-03-08 17:50:26 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123357869

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础语法

创建第一个网页

方法1：
VSCode编辑器中新建网页，后缀为.html
方法2
在资源管理器中，点击鼠标右键，新建文本文档，将.txt变为.html（原因：html文档本身就是纯文本的）

浏览网页的方法

方法1：
在文件夹中双击网页图标
方法2：
VSCode安装Live Server；功能：自动刷新网页
再文件中，按ctrl+shift+p键，选择“Open with Live Server"即可
注意：网页必须存放在文件夹中，且VSCode已经打开这个文件夹

认识HTML5骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

第一部分：文档类型声明DTD
第一行必须是DTD（Document Type Definition，文档类型声明）
作用：说明当前HTML文件遵循几代的什么版本的规范
不写DTD会引发兼容问题

第二部分：HTML标签对
包括：
head标签对：网页的配置
body标签对：网页的内容

字符集

先在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码
再更改meta标签

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集

常见的SEO配置项

SEO（Search Engine Optimization，搜索引擎优化）
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

title

1.设置网页的标题，文字会显示在浏览器的标签栏上
2.是搜索引擎收录网站时显示的标题

<title>慕课网-程序员的梦工厂</title>

关键词及页面描述

meta标签设置关键词及页面描述
name属性设置具体功能

<meta name="Keywords" content="慕课网，imooc，JAVA，前端，Python，大数据”>
<meta name="Description" content="慕课网（IMOOC）是IT技能学习平台。慕课网（IMOOC）课程涉及JAVA、前端、Python、大数据等60类主流技术语言，覆盖了面试就业、职业成长、自我提升等需求场景，帮助用户实现从技能提升到岗位提升的能力闭环。">

认识标签

通常成对儿出现
不同标签有不同功能
如何选择标签？看语义
有的标签不是成对儿的，而是只有起始标签，称为单标签

<meta charset="UTF-8">

在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写

<meta charset="UTF-8"/>

重新认识HTML

Hyper Text Markup Language超文本标记语言
是用来开发网页的语言
用标签的形式，为文档放置语义，添加部件

基本标签

标题标签

h1到h6分别代表一级标题到六级标题

<h1></h1>只能放置一个，否则会被搜索引擎视为作弊；应将重点内容放到其中，比如网页的logo等

段落标签

<p></p>
任何段落都要放到其中
原因：HTML中代码换行但页面显示效果无
不能嵌套h系列标签和其他p标签

`<div></div>`

是最常见的HTML标签
结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS"
是一个容器，什么都可以容纳

列表标签

分类	特点	结构
无序列表	无刻意顺序	unordered list、list item
有序列表	有刻意顺序	ordered list 、list item
无序列表	需逐条给出定义描述	definition list、data term、data definition

注意
<li>不能散着放，属于父子组合标签，不能单独出现
<ul>子标签只能是<li>
<li>中可以放任何标签，形成列表的嵌套

无序列表

type属性

定义前导符号的样式，但是HTML5中已经废弃，建议用CSS替代
值描述
disc 默认值-实心圆
circle 空心圆
square 实心方块

有序列表

type属性

值意义
a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）

start属性

属性值是整数，指定列表编号的起始值

reversed属性

指定列表中的条目是否是倒序排列的
不需要值，只需要写reversed单词即可，这是HTML5的全新特性

定义列表

多媒体标签

`<img>`

图片放在项目文件夹中的images子文件夹中
本质是被引入

alt属性

alternate“替代品“
对图像的文本描述，不是强制性的
若由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本

width&heigth属性

分别设置宽度和高度，单位是像素，不需要写单位
若省略其中一个属性，则表示按原始比例缩放图片

图片格式

格式说明
.bmp windows画图软件默认保存的格式
.gif 支持动画（比如表情包）
.jpeg(.jpg) 有损压缩图片，用于照片
·png 便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg 矢量图片
.webp 最新的压缩算法非常优秀的图片格式

相对路径

描述从网页出发，如何找到图片
…/回退层级

绝对路径

描述图片精准地址

`<a></a>`

是将网页和网页连结到一起的方法
是互联网成“网“的原因

<a>标签制作超级链接
<a href="2.html">去第二个网页</a>

a:anchor锚的首字母
hypertext reference 超文本引用

href属性

支持相对路径和绝对路径

title属性

用于设置鼠标的悬停文本

target属性

设置为blank即可在新标签页中打开网页，HTMl4代，blank之前有下划线

target=”_blank”

锚点

给h系列标签添加id属性，它将成为页面的锚点
网址后面添加#时，页面自动滚动到锚点所在位置
其他页面的超级链接，可以链接到指定锚点

<h1 id="wuxi">无锡美景</h1>
<a href="lvyou.html#wuxi">看无锡美景</a>

下载链接

指向exe、zip、rar等文件格式的链接，将自动成为下载链接

<a href="2.zip">下载</a>

邮件链接

有mailto:前缀的链接是邮件链接，系统将自动打开Email相关文件

给小编发邮件

电话链接

有tel:前缀的链接是电话链接，系统将自动打开拨号盘

  <a href="tel:12306">打电话买火车票</a>

##<audio>
使用标签在浏览器中插入音频，兼容到IE9

 <audio controls src="音频地址">抱歉，您的浏览器不支持audio标签，请升级浏览器</audio>

controls显示播放控件
常用音频格式：mp3、ogg

autoplay属性

声明autoplay属性，音频会自动播放
常用浏览器为不打扰用户，可能不允许自动播放，必须让用户手动点击之后才能播放

loop属性

声明loop属性，音频会循环播放

`<video>`

兼容到IE9

 <video controls src="视频地址">抱歉，您的浏览器不支持video标签，请升级浏览器</video>

大纲标签&语义化标签

大纲标签（区块标签）

div标签实现文档区块分隔，为了区分每个div功能，会借助div标签的class属性
但是class命名没有规范，不同网站无法统一
为解决这个问题，HTML5推出了众多新的区块标签

<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

语义化标签

<span>属于区块标签，本身无任何特殊显示效果，可结合CSS来丰富样式
<b>、<u>、<i>充满浓浓样式意味，已经被CSS替代，但网页中也可以表示需要强调的文本

<b>	被加粗的文字
<u>	加下划线的文字
<i>	倾斜的文字
<strong>、<em>、<mark>均表示强调语义

<strong>代表特别重要文字
<em>	代表强调文字
<mark>	代表一段需要被高亮的文字
<figure> 代表一段独立的内容，与说明<figcaption>配合使用
         <figcaption>是一个独立的引用单元，比如建议读者拓展视野的图片等
         当这部分转移到附录中或者其他页面时不会影响到主体

表单标签

创建表单

所有表单都以元素开始

<form action="save.php" method='post'>
</form>

action属性

表示表单要提交到后台程序的网址

method属性

表示表单提交的方式
属性值：get/post

基本控件

input类型总结

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
button	普通按钮
reset	重置按钮
submit	提交按钮

单行文本框

是单标签

value属性

表示已经填写好的值

  <input type="text" value="123">

placeholder属性

表示提示文本
将以浅色文字写在文本框中，并不是文本框中的值

<p>
    请输入你的姓名:<input type="text">
</p>
<p>
    报考院校：<input type="text" value="清华大学">
</p>
<p>
    毕业学校：<input type="text" placeholder="请输入真实的毕业院校哦">
</p>

单选按钮

同组单选按钮要求name为相同值（满足互斥）

value属性

如果有value属性值，向服务器提交的就是value值

checked属性

如果加上了checked属性，表示默认被选中

<p>性别：
    <input type="radio" name="sex" id="男" checked>男
    <input type="radio" name="sex" id="女">女
</p>

disabled属性

如果加上了disabled属性，则无法被选中

多选按钮

同组复选框要求name值一致

   <input type="checkbox">

value属性

如果有value属性值，向服务器提交的就是value值

 <p>
      爱好：
      <label><input type="checkbox" name="hobby">足球</label>
      <label><input type="checkbox" name="hobby">篮球球</label>
      <label><input type="checkbox" name="hobby">排球</label>
      <label><input type="checkbox" name="hobby">羽毛球</label>
  </p>

密码框

   <input type="password">

三种按钮

<p>
    <button>我是一个普通按钮</button>
</p>
<p>
    <input type="button" value="我是一个普通按钮">
</p>
<p>
    <input type=submit" value="提交表单">
</p>
<p>
    <input type="reset" value="重置表单">
</p>

下拉菜单

<select>标签表示下拉菜单
<option>是内部选项
    <p>
        请选择你的支付方式：
        <select>
            <option value="alipay">支付宝</option>
            <option value="wx">微信</option>
            <option value="bank">网银</option>
        </select>
    </p>

多行文本框

<textarea></textarea>

rows和cols属性

用于定义多行文本框的行数和列数

<p>
     留言：
     <textare cols="30" rows="10"></textare>
</p>

label标签

用于将文字和单选/多选选项按钮绑定，单击文字时也视为点击了单选/多选按钮

<label>
    <input type="radio">男
</label>
<label>
    <input type="radio">女
</label>

在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的

<input type="radio" id="nan">
<label for="nan">男</label>

HTML5中新增的表单控件

type属性值	控件
color	颜色选择
date、time	日期、时间选择
email	电子邮件输入
file	文件选择控件
number	数字输入
range	拖拽条
search	搜索框
url	网址输入

`<datalist>`控件

为输入框提供一些备选项
当用户输入的内容与备选项文字相同时，将会显示智能感应

<input type="text" list="province-list">
<datalist id="province-list">
    <option value="山东">
    <option value="山西">
    <option value="广东">
    <option value="广西">
    <option value="河南">
    <option value="河北">
    <option value="湖南">
    <option value="湖北">
</datalist>

表格标签

<table>
     <tr>
         <td>A</td>
         <td>B</td>
         <td>C</td>
         <td>D</td>
     </tr>
     <tr>
         <td>E</td>
         <td>F</td>
         <td>G</td>
         <td>H</td>
     </tr>
     <tr>
         <td>I</td>
         <td>J</td>
         <td>K</td>
         <td>L</td>
     </tr>
 </table>

`<table>`、`<tr>`、`<td>`

tr:table row
td:table data

border属性

表格显示边框

<table border=’1’>
</table>

caption属性

表格标题

`<th>`

是“标题小格”，可以替代<td>的作用

复杂表格

合并单元格

colspan属性

用来设置td或者th的列跨度

rowspan属性

用来设置td或者th的行跨度

`<thead>`、`<tbody>`、`<tfoot>`

<table border="1" width=400>
    <thead>
        <tr>
            <th colspan="2">第一季度</th>
            <th colspan="2">第二季度</th>
            <th colspan="2">第三季度</th>
            <th colspan="2">第四季度</th>
        </tr>
        <tr>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>手机</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th>农产品</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th>水产品</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>汇总</th>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
        </tr>
    </tfoot>
</table>