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 标签的属性必须使用双引号

<h1style="color:red">标题1</h1><!-- 以下是错误写法 -->
<h1 style=color:red>标题1</h1>
<h1style='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><divstyle="height: 600px;"></div><h2 id="home">首页</h2><divstyle="height: 600px;"></div><h2 id="about">关于我们</h2><divstyle="height: 600px;"></div><a href="#">返回顶部</a>

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

<p><a href="#home">首页</a> | <a href="#about">关于我们</a></p><divstyle="height: 600px;"></div><a name="home">首页</a><divstyle="height: 600px;"></div><a name="about">关于我们</a><divstyle="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">

HTML 基础知识简介相关推荐

Linux中文件描述符1,linux内核中的文件描述符(一)--基础知识简介
原标题:linux内核中的文件描述符(一)--基础知识简介 Kernel version:2.6.14 CPU architecture:ARM920T Author:ce123(http://blo ...
SpringCloud(1) 架构演进和基础知识简介
一.传统架构演进到分布式架构简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive 1.单体应用:开发速度慢.启动时间长.依赖庞大.等等 2.微服务:易开发.理 ...
IT：后端进阶技术路线图(初级→中级→高级)、后端开发工程师(技术方向分类之后台业务开发/中间件/内核/分布式架构)基础知识简介、技术路线/技术趋势指南(如何选择自己的技术方向)之详细攻略
IT:后端进阶技术路线图(初级→中级→高级).后端开发工程师(技术方向分类之后台业务开发/中间件/内核/分布式架构)基础知识简介.技术路线/技术趋势指南(如何选择自己的技术方向)之详细攻略目录后端 ...
Windows通用克隆系统入门基础知识简介
Windows通用克隆系统入门基础知识简介这里的Windows是指微软的Windows 2000/XP/2003(后文中未经说明的,凡是Windows均指这三种系统):所谓的通用克隆,俗名万能克隆, ...
linux内核中的文件描述符(一)--基础知识简介
linux内核中的文件描述符(一)--基础知识简介 Kernel version:2.6.14 CPU architecture:ARM920T Author:ce123(http://blog.cs ...
IC卡(智能卡)基础知识简介
目录 IC卡(智能卡)基础知识简介 1.何为IC卡(智能卡) 2.IC卡的相关规范 3.智能卡如何管理其存储器 4.智能卡如何对信息存取过程进行控制 IC卡(智能卡)基础知识简介 IC卡(智能卡)基础 ...
计算机电源的输出电压包括,计算机电源的基础知识简介
计算机电源的基础知识简介 1.简述计算机机箱的分类. 机箱根据不同的分类别标准有不同的分类,首先根据机箱的外形可以把机箱分为卧式和立式两种. 按照机箱的尺寸又可以分为超薄.半高.3/4高.全高等4种类 ...
InSAR基础知识简介
InSAR基础知识简介合成孔径雷达干涉测量雷达相位跨轨干涉仪&沿轨干涉仪地形干涉测量干涉图解译相干 1.配准 2.去除平地相位 3.大气延迟相位 4.多视和滤波处理.去除散斑 5. ...
101-相机基础知识简介
101-相机基础知识简介一.相机主要部件二.色彩滤镜矩阵(Color Filter Array) Quad Bayer 备忘简单介绍Camera的相关术语与原理一.相机主要部件 Camera主 ...
安装python步骤-从0到1，Python安装步骤详解（附基础知识简介）！
Python下载安装步骤 python解释器,在Linux中可以内置安装,而在windows中则需要去下载.具体步骤如下: 第一步:通过Web浏览器,访问http://www.python.org官网 ...

HTML 基础知识简介