HTML基础到精通笔记
1.HTML基础：
标题标签--h1-h6标签
h1-h6用于定义文档中的标题或者章节标题
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
段落标签---p标签
<p>这是一个段落</p>
<p>这是另一个段落标签</p>HTML链接---a标签
<a href="http://www.baidu.com">这是一个链接</a>
target：定义链接的打开方式
_blank: 在新窗口或新标签页中打开链接
_self: 在当前窗口或标签页中打开链接（默认）
_parent: 在父框架中打开链接
_top： 在整个窗口中打开链接，取消任何框架
rel：定义链接与目标页面的关系
nofollow；表示搜索引擎不应跟踪该链接，常用于外部链接
noopener和noreferrer：防止在新标签中打开链接时的安全问题，尤其是使用_blank时
noopener: 防止新的浏览上下文页面访问window。opener属性和open方法
noreferrer:不包括referer header就是说不告诉网站你是从哪里来的
download：提示浏览器是下载链接而不是导航到该目标
<a href="./index.html" target="_blank" download="index.html">xiazai</a>
title：鼠标悬停的提示信息
<a href="http://www.baidu.com" title="访问百度吗">baidu</a>
id：用于链接描点，通常在页面中跳转到特定的位置
<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>
hreflang：指定链接的目标URL的语言
<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>
type:指定链接资源的MIME类型
<a href="styles.css" type="text/css">样式表</a>
class：用于指定元素的类名
<a href="http://www.baidu.com" class="external-link">外部链接</a>
style：元素上定义CSS样式
<a href="http://www.baidu.com" styles="color:red;">元素上定义样式</a> 点击会变红
HTML图像---img标签
<img src="./hacker1.png" alt="出错啦" width="50" height="80"> //alt是错误时的显示文字，width是宽，height是高
HTML属性:
class 为html元素定义一个或多个类名
id 定义一个元素的唯一id
style 规定元素的行内样式
titile 描述了元素的额外信息
id：给元素一个唯一的标识符，可以用于CSS选择器或js操作
class：给元素指定一个或多个类名，方便通过CSS或js操作
style：直接为元素定义CSS样式
href：用于a标签，指定链接目标
src；用于img和script标签，指定资源路径
alt：用于img标签，提供图片的替代文本，即图片错误提示
titile：提供关于元素的额外信息，通常在鼠标悬停时显示
name：在input，form，select等单元素中使用，定义元素名称
value：定义表单元素的值
target：用于a标签，指定链接打开方式
type：执行表单元素的类型
placeholder：为input和textarea提供一个占位符文本
hr标签
<p>这是一个段落</p>
<hr>
<p>这是另一个段落标签</p>
用于在中间添加一个水平线
注释
<!--注释内容-->总结：
html 定义html文档
body 定义文档主体，网页显示的内容
h1-h6 定义html标题
hr 添加水平线
<!----> 定义注释格式化标签-字体格式-粗-细-斜
<b>粗体字</b>
<em>着重文字</em>
<i>斜体文字</i>
<small>小号字体</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>计算机输出标签
<code>计算机代码</code>
<kbd>键盘码</kbd>
<samp>定义计算机代码样本</samp>
<var>定义变量</var>
<pre>定义预格式文本</pre>HTML引文，引用，标签定义
abbr 定义缩写
address 定义地址
bdo 定义文字方向
blockquote 定义长的引用
q 定义短的引用语
cite 定义引用，引证
dfn 定义一个定义项目
HTML头部标签-head
base标签
head下定义默认标签
<base href="http://www.bilibili.com" target="_blank">
body下
<a href="">默认链接</a>
默认链接会指向head的http://www.bilibili.comlink元素
用于链接到样式表-文档和外部资源之间的关系
<link rel="stylesheet" type="text/css" href="mystyle.css">style元素
<style type="text/css">
body{ /*body是内容显示标签，这里就是改背景了 */
background-color: yellow;
}
p{ /*这里是给p标签改字体*/
color:aqua
}
</style>meta标签
定义搜索关键词
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
为网页定义描述内容
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者
<meta name="author" content="Runoob">
每30秒刷新当前页面
<meta http-equiv="refresh" content="30">head元素总览
head 定义文档信息
title 定义了文档的标题
base 定义了页面链接标签的默认链接地址
link 定义了文档与外部资源的关系，链接外部链接
meta HTML的元数据
script 客户端的脚本文件
style HTML文档的样式文件HTML图像
在html中，图像是由img标签定义的，img是空标签，只有属性，没有闭合，但标签大多是无闭合，只用于设置属性，要在页面上显示图像，要使用src源，源属性值为图像的路径地址
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
src 源图像的路径
alt 图片错误的提示信息
width 宽度
height 高度
HTML表格
HTML表格由table标签来定义
HTML表格是一种用于展示结构化数据的标记语言元素
每个表格均有若干行(tr定义行)，每行被分割为若干个单元格(td定义单元格)，表格可以包含标题行（th）用于定义列的标题
tr 表示表格的一行
td 表示表格的数据单元格
th 表格的表头单元格实例1-
<table border="1"> <!--定义表格标签--> 这里的border是设置边框
<thead> <!--定义表头部标签-->
<tr> #定义行，这里是第一行
<th>列标签1</th> 表的头部，这里是第1列
<th>列标签2</th> 表的头部标签，这里第2列
<th>列标签3</th> 表的头部，这里是第3列
</tr>
</thead>
<tbody> #定义表的内容
<tr> 这里其实就是第二行数据了，第一行是thead头部
<td>行1-列1</td> //定义列，这里是第1行的第1列
<td>行1-列2</td> //定义列，这里是第1行的第2列
<td>行1-列3</td> //定义列，这里是第1行的第3列
</tr>
<tr> #这里是第三行的数据
<td>行2-列1</td>
<td>行2-列2</td>
<td>行2-列3</td>
</tr>
</tbody>
</table>HTML无序列表
无序列表是一个没有i项目的列表，此列项目使用粗体圆点（典型的小黑圆圈），进行标记
无序列表使用ul标签
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
在浏览器中打开后开头有一个圆点HTML有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>HTML自定义列表
<dl>
<dt>列表1</dt>
<dd>##我是列表1的内容</dd>
<dt>列表2</dt>
<dd>##我是列表2的内容</dd>
</dl>HTML区块
html可以通过div和span将元素连结起来
大多数 HTML元素被定义为块级元素或内联元素
HTML块级元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>HTML内联元素
内联元素在显示时通常不会以新的行显示
实例: <b>, <td>, <a>, <img>HTML<div>元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。HTML<span>元素
HTML<span>元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义
与CSS一起使用时，<span>元素可用于为部分文本设置样式属性HTML布局--div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px"> <!--这里空出来了-->
<div id="header" style="background-color:#FFA500;"> <!--定义了头部，颜色为橙色-->
<h1 style="margin-bottom:0;">主要的网页标题</h1></div> <!--margin-bootom定义了与下方元素的边距离-->
<div id="menu" style="background-color:chartreuse;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br> <!--//这里的HTML，菜单，CSS，JavaScript都是放在了div块中的，div块的颜色设置为了黄色-->
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> <!--浮动，浮动往左-->
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> <!--//这个居中是居于div块的中间-->
版权 © runoob.com</div>
</div>
</body>
</html>HTML表单和输入
html表单用于收集用户的输入信息
html表单表示文档中的一个区域，此区域包含交互控件，将用户收集的信息发送到Web服务器
html表单通常包含各种输入字段，复选框，单选按钮，下拉列表等元素
元素定义
from元素用于创建表单，action属性定义了表单数据提交的目标URL，method属性定义了提交数据的HTTP方法，这里使用POST
label元素用于为表单元素添加标签，提高可访问性
input元素是最常用的表单元素之一，它可以创建文本输入框，密码框，单选按钮，复选框等，type属性定义了输入框的类型，id属性用于关联label元素，name属性用于识别表单字段
select元素用于创建下拉列表，而option元素用于定义下拉列表中的选项实例1-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/" method="post" name="form">
<!-- 文本输入框 -->
<label for="name">用户名：</label>
<input type="text" id="name" name="name"><br>
<!-- 密码输入框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<!-- 单选按钮 radio是单选按钮 -->
<label>性别</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="sub" name="sub">
<label for="sub">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="count">国家</label>
<select name="count" name="count">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>HTML框架
基本语法iframe
<iframe src="1.html" ></iframe>iframe设置高度和宽度
<iframe src="1.html" width="500" height="900"></iframe>iframe移除边框
<iframe src="1.html" frameborder="0"></iframe>
使用iframe来显示目标链接页面
<!-- 点击x的时候会跳转到x.com的1.html下 -->
<iframe src="1.html" name="iframe"></iframe>
<p><a href="http.www.x.com" target="iframe" rel="noopener">x</a></p> CSS样式
css可以通过以下方式添加到HTML中
内联样式 在HTML元素中使用style属性
内部样式表 在HTML文档头部head中使用style元素，来包含CSS
外部引用 使用外部CSS文件内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式，使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何CSS是属性，以下实例显示出如何改变段落的颜色和左外边距
<p style="color:aqua;margin-left:20px;" >内联样式的CSS</p> //margin-left是左边缘距离的意思样式实例-背景颜色和标签背景颜色
<body style="background-color:darkred;">
<p style="background-color:coral;">段落标签</p>
<h2 style="background-color:green">我是h2</h2>
<p style="color:aqua;margin-left:20px;" >内联样式的CSS</p>
margin-left //最左边距样式实例-字体-字体颜色-字体大小
<p style="font-family:arial;color:red;font-size:50px">一个段落</p>
font-family 字体
color 颜色
font-size 大小文本对齐方式
<h1 style="text-align:center">剧中对齐</h1>
align 对齐内部样式表
当单个文件需要特别样式时，就可以使用内部样式表，你可以在head部分通过style标签定义内部样式
html头部定义样式
body{
background-color:black;
p{background-color: beige;}
}
定义了body标签和p标签的背景颜色外部样式表
当样式要被应用到很多页面的时候，例如多个html文件需要使用css，外部样式就是最好的选择了， 使用外部样式表，就可以通过修改一个文件来改变真个站点的外观
head头部标签中使用
<link rel="stylesheet" type="text/css" href="mystyle.css">
链接到外部的css文件