HTML 基础知识简介-CSDN博客

本文链接：https://blog.csdn.net/weixin_44954172/article/details/91451510

html笔记

xhtml和html的区别

文档的声明不同

html5文档声明如下：

<!DOCTYPE html>

xhtml文档声明如下：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

XHTML 元素必须被正确地嵌套。

<!-- 以下代码非正确嵌套 -->
<ul>
    <p>
        段落
        <li>项目1</li>
    </p>
    <li>项目2</li>
</ul>

XHTML 元素必须被关闭。

<h1>标题1</h1>

<!-- 以下代码没有结束标签 -->
<h2>标题2

XHTML 标签名必须用小写字母。

<h1>标题1</h1>
<!-- 以下标签名大写了 -->
<H1>标题1</H1>

XHTML 标签的属性必须使用双引号

<h1 style="color:red">标题1</h1>

<!-- 以下是错误写法 -->
<h1 style=color:red>标题1</h1>
<h1 style='color:red'>标题1</h1>

XHTML 标签必须要根元素

<html lang="en">

</html>

什么是html

html主要分三大块：

文档声明 <!DOCTYPE html>
根元素 html
头部 head
身体 body

一个标准的html5文档如下

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

lang 的含义 <html lang="en">

lang等于en的意思是告诉搜索引擎，此网页是英文网页。

<meta charset="UTF-8">

文档的编码，除了UTF-8，还有gbk, gb2312等

gbk国标码，gb2312 中国编码

UTF-8万国码

视口<meta name="viewport" content="width=device-width, initial-scale=1.0">

主要是用于控制页面的缩放，在后面讲响应式网站开发，会详细介绍

<meta http-equiv="X-UA-Compatible" content="ie=edge">

使用ie最前沿的版本渲染网页，使用你本地电脑中安装的ie最高版本

窗口标题 <title>网页标题</title>

网页标题，主要在浏览器窗口中显示，同时也便于搜索引擎抓取

网页关键字 <meta name="keywords" content="">

主要用于SEO优化，方便搜索引起抓取你网页的关键字，多个关键字用英文逗号分割，注意控制在50-60字数

网页描述 <meta name="description" content="">

主要用于SEO优化，方便搜索引擎检索你的网页描述

认识xhtml文档

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>

认识xml文档

<?xml version="1.0" encoding="UTF-8"?>
<note>
	<to>George</to>
	<from>John</from>
	<heading>Reminder</heading>
	<body>Don't forget the meeting!</body>
</note>

主要是用于协调各种语言，或者各种终端之间的传输通讯，你可以理解为国际上使用英语作为标准语言。

认识html标签

标题

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

段落

<p>段落</p>

超级链接

<a href="#">网页</a>

项目列表

无序项目列表

<ul type="disc">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

<ul type="square">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

<ul type="circle">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

有序项目列表

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

<ol type="a">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

<ol type="A">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

<ol type="1">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

<ol type="I">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

<ol type="i">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

自定义列表

通常适用于问答形式的结构排版

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

图像

<img src="images/ifengLogo.png" alt="">

换行

<br>

表格

cellspacing 表格间距
cellpadding 表格的填充
align 表格对齐
left 左对齐
center 居中对齐
right 右对齐

<table cellspacing="0" cellpadding="20" width="500" border="1" align="center">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>女</td>
    </tr>
</table>

表格也包含thead、tbody、tfoot

<table cellspacing="0" cellpadding="20" width="500" border="1" align="center">
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合计：2 人</td>
        </tr>
    </tfoot>
</table>

内嵌框架（窗口）

a中target表示目标对象，这里写 _blank、_self、iframe的名称

iframe 是指在网页内部嵌套一个小窗口，主要用于局部浏览，是几年前非常热门的技术。

注意：iframe 用多了会影响整个页面加载

<a href="http://www.163.com" target="main">网易</a> | 
<a href="http://www.baidu.com" target="main">百度</a> <br><br>

<iframe name="main" width="500" height="300"></iframe>

水平线

<hr>

布局排版

<div></div>
<span></span>
<p></p>
<ul>
    <li></li>
</ul>

10.1 什么块标签和行内标签？

块标签：是指该标签独占一行，它的宽度默认是自适应

有那些是块级标签？

div
h1-h6
p
ul-ol
hr

行标签：是指该标签它的宽度是内容撑起来的宽度，并且行内标签之间可以并排

有那些是块行标签？

span
a
img
b
i
u
s

以下是常用修饰文本的行级标签

<!-- 没有语义 -->

<b>文字</b>
<i>文字</i>
<u>文字</u>
<s>文字</s>

<hr>
<!-- 有语义 -->
<strong>文字</strong>
<em>文字</em>
<ins>文字</ins>
<del>文字</del>

特别注意：行级标签，你无法设置它的宽和高度

行块标签：该标签介于行和块特性综合的标签

表单

11.1 表单标签

<form action="">
</form>

注意：form标签一定要正确的嵌套

注意：form标签内部不能在嵌套form标签

表单控件常见属性：

name：控件的名称，注意不要使用中文和数字，以字母开头，后面允许数字、下划线。name通常和后端打交道，后端获取控件的值是从value获取
value：控件的值，获取值都是从这个属性，我们也可以给它设置一个值，这样一刷新就是显示出来。

<input name="username"  type="text" value="张三">

type：控件类型：
1.text
2.password
3.radio
4.checkbox
5.color
6.range
7.submit
8.reset
maxlength：最大长度
minlength：最小长度
required：必填
size：控件宽度（按字体个数算宽度）
disabled：失效的、禁用
readonly：只读的，可以复制它内容
enabled：可用的，有效的
checked：主要用于设置单选框、复选框的默认选中值

<input name="sex" type="radio"> 男
<input name="sex" type="radio" checked> 女
<hr>
<input name="habby" type="checkbox"> 吃
<input name="habby" type="checkbox" checked> 喝
<input name="habby" type="checkbox"> 睡
<input name="habby" type="checkbox" checked> 玩

selected：主要用于设置单行或者多行下拉列表框的选中效果

<select>
    <option value="">请选择</option>
    <option value="" selected>本科</option>
    <option value="" >大专</option>
</select>

cols：多行输入框控件的宽度（按字体个数算宽度）
rows：行数，多行输入框控件的高度

<textarea name="" id="" cols="50" rows="5">
        这家伙很懒！
        换行
</textarea>

注意：多行文本框，它的值在双标签的内部输入，并且它能记录空格和换行字符。

placeholder：表单控件内置文本提示信息，只适用于输入框类型text、password、textarea、email、number等等
autofocus：自动获得焦点
autocomplete：自动完成，该功能会收集你上一次输入的值，然后形成下拉列表效果，供你参考选择，默认是开启。它有2个选择，1. on 代表开启 2. off 代表关闭
multiple：表示多个，下拉列表加上此属性表示多行下拉列表框，file上传框加上此属性，表示允许上传多个文件
webkitdirectory：此属性是file控件的属性，加上此属性，表示可以上传文件夹。
accept：此属性是file控件的属性，加上此属性，表示选择文件的范围

上传头像：
<input type="file" multiple webkitdirectory>

只能上传gif图片和jpep图片

<input type="file" multiple accept="image/gif, image/jpeg">

表单控件

单行文本框：<input type="text">
密码框：<input type="password">
单选框：<input type="radio">
复选框：<input type="checkbox">
单行下拉列表框：<select><option>请选择</option></select>
多行下拉列表框：<select multiple><option>请选择</option></select>
下拉列表框分组： <optgroup label="组名"></optgroup>
上传框：<input type="file">
多行文本框：<textarea cols="30" rows="5"></textarea>
按钮：<button type="button">按钮</button>
表单控件分组: <fieldset> <legend>组名</legend>  </fieldset>

按钮分两种类型按钮：

双标签按钮

<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

单标签按钮

<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">

考虑优先使用双标签按钮

<form action="">

    用户：<input type="text"> <br>
    密码：<input type="password"> <br>
    性别：<input name="sex" type="radio"> 男
          <input name="sex" type="radio"> 女<br>
    爱好：<input type="checkbox"> 篮球 
          <input type="checkbox"> 足球
          <input type="checkbox"> 排球 <br>
    学历：<select>
            <option value="">请选择</option>
            <option value="">本科</option>
            <option value="">大专</option>
        </select><br><br>

    技能：<select multiple> 
            <option value="">请选择</option>
            <option value="">唱歌</option>
            <option value="">做饭</option>
            <option value="">游泳</option>
        </select><br><br>
    
    头像：<input type="file"> <br><br>

    备注：<textarea  cols="30" rows="5"></textarea> <br><br>

    <button type="submit">提交</button>

    <button type="reset">重置</button>


</form>

2019-6-4

html5 新增标签

html5 新增了很多标签，大部分标签具备独特的语义，这些新增加的标签存在兼容性。

具体兼容性可以登录 can i use 这个网站进行查询

头部 `header`

<header>网站头部</header>

脚部 `footer`

<footer>网站底部</footer>

侧栏 `aside`

<aside>网站底部</aside>

主体 `main`

<main>网站主体</main>

部分模块 `section`

<section>网站部分模块</section>

导航 `nav`

<header>
    <nav></nav>
</header>

菜单 `menu`

<nav>
    <menu></menu>
</nav>

文章 `article`

<article>
    文章内容
</article>

音频 `audio`

<audio src="/i/horse.ogg"  autoplay>
你的浏览器不支持此音频
</audio>

视频 `video`

mp4 目前具有非常高的压缩算法是 h.264

<video src="/i/horse.mp4"  autoplay>
你的浏览器不支持此视频
</video>

详情（细节） `details`

<details>
文章详情
</details>

媒介内容（图片） `figure`

<figure>
  <p>图片描述</p>
  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

画布 `canvas`

canvas 主要用于制作网页特效、以及在图表上的各种应用，改画布没有层的概念

<canvas>
 你的浏览器不支持canvas
</canvas>

画布 `svg`

内联画布，它有层级关系，你可以很方便控制元素的层级

<svg>
 你的浏览器不支持canvas
</svg>

数据列表 `datalist`

通常用于搜索、检索，注意下拉列表无法检索，也不能输入值。

<input list="cars" />
<datalist id="cars">
	<option value="BMW">宝马</option>
	<option value="Ford">福特</option>
	<option value="Volvo">沃尔沃</option>
</datalist>

高亮关键字 `mark`

<p>这是一段文字 <mark>会高亮</mark></p>

摘要 `summary`

摘要的字数一般在30-50字

<summary>
    文章摘要部分
</summary>

html5标签综合结构

<header>
    头部
    <nav>
        导航
        <menu>菜单</menu>
    </nav>
</header>

<main>
    <aside>侧边栏</aside>
    <main>
        右侧
        <section>
            部分模块1
            <article>文章</article>
        </section>

        <section>
                部分模块2
                <article>文章</article>
        </section>
    </main>
</main>

<footer>底部版权</footer>

html5 新增表单标签

日期

<input type="date" >

时分

<input type="time" >

月份

<input type="month" >

颜色

<input type="color" >

数字输入

<input type="number" >

滑块

<input type="range" >

搜索

<input type="search" >

邮箱

当表单控件加上 required 属性，表示此字段是必填的。

button标签，它的type默认是submit提交。

<form action="">
    邮箱
    <input type="email" required>
    <button>提交</button>
</form>

html标签属性介绍

html常用属性（公共的）

属性	描述
id	标签唯一的标识符，页面id必须唯一，不能重名
class	样式类名，给标签设置样式，样式由css代码提供
name	标签名，标签名可以重复，那么在表单控件当住作为取值的属性
style	行内样式，方便快速写样式代码，但是尽量少这样做，这样使得代码不好阅读，也增加维护成本

常用标签属性

标题

align: 对齐, left：左 center：居中 right: 右

<h1 align="left">标题</h1>
<h1 align="center">标题</h1>
<h1 align="right">标题</h1>

超级链接 `a`

href：超级链接的地址
target：目标 _self 默认 _blank 新窗口 _parent 父窗口 iframe名称
name: 锚点名称

注意：如果是外链加上协议（http://、https://）

<a href="http://www.163.com" >网易</a>
<!-- 谷歌工程师推荐写法 -->
<a href="//www.163.com">网易</a>

锚点连接示例

使用id作为锚点名称

<p><a href="#home">首页</a> | <a href="#about">关于我们</a></p>

<div style="height: 600px;"></div>

<h2 id="home">首页</h2>

<div style="height: 600px;"></div>

<h2 id="about">关于我们</h2>

<div style="height: 600px;"></div>

<a href="#">返回顶部</a>

使用 a 标签name属性作为锚点名称

<p><a href="#home">首页</a> | <a href="#about">关于我们</a></p>

<div style="height: 600px;"></div>

<a name="home">首页</a>

<div style="height: 600px;"></div>

<a name="about">关于我们</a>

<div style="height: 600px;"></div>

<a href="#">返回顶部</a>

设置超级链接基础地址

href 网站基础地址

<base href="http://www.baidu.com">

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <base href="http://www.baidu.com">
</head>
<body>
    <!-- 会被解析为http://www.baidu.com/a.html -->
    <a href="a.html">网页1</a>
    <a href="b.html">网页2</a>

图像标签`img`

alt：当图像没有显示时，给出提示文字，seo优化方面
src：图像的路径，支持外链图片，本地图片
width：图片的宽度，默认像素，不需要加px，也支持使用%单位
height：图片的高度，默认像素，不需要加px，也支持使用%单位
srcset：根据屏幕宽尺寸示不同的图片，主要用于响应式布局
sizes：根据屏幕尺寸定义不同的图片的尺寸，主要用于响应式布局

注意：当你只写width宽，高不写，浏览器会等比例缩放高，宽反之亦然。
srcset和sizes兼容性不是很好，在火狐中测试正确

align：图像对齐

图像对齐：

top：顶部对齐
middle：居中对齐
baseline：基线对齐
bottom：底部对齐
absmiddle：绝对居中
left：左对齐
right：右对齐

示例：

顶部：<br>
<img src="images/1.png" width="100" align="top"> 美丽的风景 <br><br>

居中：<br>
<img src="images/1.png" width="100" align="middle"> 美丽的风景<br><br>

绝对居中：<br>
<img src="images/1.png" width="100" align="absmiddle"> 美丽的风景<br><br>

基线：<br>
<img src="images/1.png" width="100" align="baseline"> 美丽的风景<br><br>

居底：<br>
<img src="images/1.png" width="100" align="bottom"> 美丽的风景<br><br>

图像间距：

hspace：图片水平方向左右间距
vspace: 图片垂直方向上下间距

3.1 路径：

./：表示当前目录（文件夹）下
../：上一级目录
../../：上上一级目录

3.1.1. 绝对路径

<img src="/images/user/cdb/ifengLogo.png" alt="">

3.1.2. 相对路径（常用）

<img src="../../user/cdb/ifengLogo.png" alt="">

3.1.3. 物理路径

<img src="file:///F:/studyspace/web1908/html-css/images/user/cdb/ifengLogo.png" alt="">

<img
srcset="images/320.png 320w,images/480.png 480w,images/800.png 800w"
sizes="(max-width:320px) 280px, (max-width:480px) 440px,800px"
src="images/800.png" 
>

2019-6-5

表格标签

属性	描述
`table`	表格标签
`tr`	表格的行
`th`	表格的字段
`td`	表格的单元格
`caption`	表格的标题，居中
`thead`	表格的头部
`tbody`	表格的身体
`tfoot`	表格的脚部
`colgroup`	定义表格列的组
`col`	定义表格列的组

表格示例：

    <table width="300" border="1">
        <caption>学生档案</caption>
        <colgroup>
            <col width="20%" bgcolor="red">
            <col bgcolor="green">
            <col width="20%" bgcolor="blue">
        </colgroup>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>学历</th>
        </tr>
        <tr>
            <td>1</td>
            <td bgcolor="yellow">张三</td>
            <td>本科</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>本科</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王二</td>
            <td>本科</td>
        </tr>
    </table>

注意：表格的单元格中能再嵌套表格

注意：不要在table和tr之间或者tr和th，tr和td之前放除表格标签（thead、tbody、tfoot）以外的元素，否则会被提升到表格标签以外。

收缩性表格

默认情况下，表格是分亮边、暗边，亮边和暗边中间会有间距，这样的做法，让表格看起来很有立体感，但是这不是符合所有的场景，所以我可以通过以下属性，将表格设置为收缩性表格。

border-collapse: collapse

 <table width="300" border="1" style="border-collapse: collapse">