【HTML】
目录
HTML基础
HTML的基础框架
<html> <head> <!-- 头部--> </head> <body> <!-- 身体--> </body> </html>HTML的属性
HTML属性是指定HTML元素附加信息的一种方式。HTML标签可以拥有属性，并且属性提供了有关HTML元素的更多的信息。
常见的HTML属性包括：
id：为元素提供唯一的标识符，常用于JavaScript获取元素。class：指定元素的类别，为元素提供一种样式。name：通常用于表单元素，如输入框、单选框等。style：用于直接在元素上设置CSS样式。type：如input标签的type属性，用于定义输入类型，如text、password、checkbox等。value：为元素定义默认值，如button标签的value属性<a href="https://www.example.com">这是一个链接</a> <p class="intro">这是一个段落。</p>第一行代码的意思是链接，而里面的href就是属性，意思是点击这个链接跳转到href指向的网页，第二行代码的属性是class，它为该段落指定了一个类型名，即intro，也可以在一个标签给这个元素定义多种类名，通过类名可以设置颜色等
HTML标题
HTML的标题通过<h>以及</h>来进行表示,h表示head，同时h也有1到6总共6种选择，分别代表标题标题1到标题6
HTML的水平线使用<hr/>
<html> <head> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
HTML段落
HTML的段落通过标签<p> 以及 </p> 来进行表示
<html> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> </body> </html>运行结果如下
HTML链接
HTML的<a>标签通常用于创建链接，这些链接可以指向其他网页、文件、图片、下载资源等
在指定链接的时候，需要使用href来指定链接的地址
<html> <body> <a href="http://www.baidu.com"> 点击链接</a> </body> </html>
HTML图像
HTML的图像使用<img>标签来进行显示，需要注意的是<img>是没有结束符的，也就是这个标签是独立的，只需要往里面填写属性即可
<html> <body> <img src="xxxxxxxxxxx.gif" width="300" height="120" /> </body> </html>标签里面均为属性，可以指明图片的地址以及宽度高度
HTML元素
HTML的元素指的是从开始标签到结束标签中间的内容
如下代码
<a href = "www.baidu.com"> 点击此处跳转 </a> <!-- 点击此处跳转为元素 --> <p> 这是一个段落 </p> <!-- 这是一个段落为元素 -->空的HTML元素
没有内容的HTML元素称为空元素，空元素在开始标签关闭，比如说<br>的意思是换行，因为他是空元素，所以在开始标签需要结束，也就是<br/>
HTML标签大小写
HTML的标签是不区分大小写的，但是最好还是使用小写
HTML属性
HTML属性定义
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定
如下代码
<a href = "www.baidu.com"> 点击 </a>其中，href就是属性，指明了跳转的链接
<html> <body> <h1 align="center">This is heading 1</h1> </body> </html>
HTML的双引号
HTML的属性必须始终被双引号包围，但是有些特殊情况下需要使用单引号，比如说值本身就带双引号
name='Bill "HelloWorld" Gates'如上为属性赋值，但是因为里面有带双引号的，所以最外面用单引号
HTML的样式
HTML的style属性提供了一种改变所有HTML元素的通用方法
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
HTML的注释
HTML的注释和C/C++等不同，HTML的注释方式为 <!-- 注释内容 -->
HTML CSS
HTML中的CSS指的是层叠样式表（Cascading Style Sheets），它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示HTML样式的一种编程语言，可以实现网页和内容进行分离的一种样式语言。
在HTML文档中，CSS代码可以嵌入到HTML元素中，也可以外部链接，甚至可以外部引用一个CSS文件。在CSS中，可以通过选择器来选择HTML元素，然后定义这个元素的样式，比如颜色、背景、字体、大小等。
外部样式表
如果样式表需要被使用到很多界面，那么最佳的使用便是外部样式表，因为通过外部样式表，仅仅只需要通过改变文件，就可以修改整个页面的样式
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>'rel="stylesheet"'表明此链接的关系是样式表，'type="text/css"'表明样式表是以CSS语言编写的，'href="mystyle.css"'表示样式表文件的位置
内部样式表
当是单个页面需要用到特定的样式的时候，那么首先应该使用内部样式表，可以再head头部中来定义内部样式表
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>'<style>'标签用于定义内联CSS样式，'type="text/css"'表明样式是以CSS语言编写的。在这个例子中，'body {background-color: red}'表示整个网页的背景色将是红色，'p {margin-left: 20px}'表示所有的段落 ('<p>') 的左边距将是20像素。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
也就是说，比如说特定的段落什么的需要用到特定的样式，那么就需要用到内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>上面的代码就是使用了内联样式，定义在段落标签的属性里面，表示字体颜色为红色，同时到左边的举例为20像素
标签 描述 <style> 定义样式定义。 <link> 定义资源引用。 <div> 定义文档中的节或区域（块级）。 <span> 定义文档中的行内的小块或区域。
HTML链接
链接可以是字、词甚至是一幅图像，通过点击它可以进行对应的动作跳转，跳转到新的链接或者文档中的某个位置，通过<a></a>来进行链接的创建
<a href = "www.xxx.com"> 点击此处跳转 </a>此时通过点击“ 点击此处跳转 ”，会链接到href所指向的网站
链接标签的target属性，可以指定打开的文档在哪里显示
<a href = "www.xxx.com" target="_blank" > 点击此处跳转 </a>如上代码可以打开新的文档，同时因为target指定，会在新的页面打开
HTML链接的name属性
使用name属性可以规定名称，使用name可以创建HTML页面中的书签，书签对网页浏览者是可不见的，但是我们可用通过<a>连接来跳转到命名的位置
<a name="tips">基本的注意事项 - 有用的提示</a> <a href="#tips">有用的提示</a> <a href="http://www.xxx.com.cn/xxx.asp#tips">有用的提示</a>如上代码，第一行给该位置命名为tips，而第二行通过href属性可以跳转到tips这个位置，及时在其他文件里，也可以通过href加上文档路径加上#tips跳转到这里
HTML图像
在HTML中，图像使用<img>来进行表示，同时，因为此标签为空标签，所以它不需要闭合，只需要对它的属性进行修改即可。
<img src=".............." />src里面是图片的路径，在此处就可以显示这个路径的图片了
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
<html> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html>如上代码创建了一个表格，表格的border属性表示表格的线的宽度，<tr></tr>之间表示行,<td></td>表示列
表格的表头
表格的表头使用<th>标签来进行表示，一般的浏览器会把表格的表头显示为居中粗体的文本
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML列表
无序列表
<ul> <li>Coffee</li> <li>Milk</li> </ul>无序列表的标签为<ul></ul>，对列表的内容前面使用小黑点进行显示，列表的内容开始于标签<li>止于</li>
有序列表
<ol> <li>Coffee</li> <li>Milk</li> </ol>有序列表的标签为<ol></ol>，对列表的内容前面使用数字进行排序，列表的内容开始于标签<li>止于</li>
定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
HTML div和span
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。也就是说，在div容器里面的所有的元素的格式都会设置为div所设置为的属性
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<html> <body> <h3>This is a header</h3> <p>This is a paragraph.</p> <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> <span>12312<span> <br/> <span>324234<span> <br/> <span>dfsd<span> <br/> <span>231231<span> </div> </body> </html>
HTML 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <p>114514</p> </div> </body> </html>
不仅仅是div类型标签，像span类型标签也可以首先定义一个风格类，然后再span标签里的属性对class进行赋值
HTML id 属性
HTML的id属性用于为 HTML 的元素指定唯一的id，在一个HTML文档中不能存在同名的id，是具有唯一性的
id属性的使用
id属性指定HTML元素的元素的唯一id，也就是说，当你在创建一个新的元素的时候，如果给它创建了一个id号，那么在此文档中，这个id号就唯一表示这个元素了。JavaScript也可以使用这个唯一的id号来对此元素进行控制
<!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html>
Class 与 ID 的差异
在同一个文档中，class可以被多个元素使用，但是id只能被唯一元素所使用
<!DOCTYPE html> <html> <head> <style> /* 设置 id 为 "myHeader" 的元素的样式 */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* 设置类名为 "city" 的所有元素的样式 */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h1>Class 与 ID 的差异</h1> <p>一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：</p> <!-- 拥有唯一 id 的元素 --> <h1 id="myHeader">我的城市</h1> <!-- 拥有相同类名的多个元素 --> <h2 class="city">上海</h2> <p>中国最大的经济城市。</p> <h2 class="city">深圳</h2> <p>中国最具创新力的城市。</p> <h2 class="city">北京</h2> <p>中国的首都。</p> </body> </html>
id与JavaScript共同使用
JavaScript可以使用id属性作为特定的元素执行某些任务，可以通过getElementById这个函数获取相应元素里面的值
<!DOCTYPE html> <html> <body> <h2 id="myHeader">Hello World!</h2> <button onclick="displayResult()">改变文本</button> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> </body> </html>
HTML JavaScript
使用HTML编写的网页是静态的，使用JavaScript可以使网页动起来
JavaScript的标签
<script>标签用于定义客户端的脚本，标签中可以包含脚本语言，也可以通过src属性来指向外部脚本，如下为使用JavaScript往id为demo的属性里面修改特定的值
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>使用getElementById可以指定输入的id的属性，document.表示从全局里面找到id为demo的属性
使用JavaScript更改指定属性的样式
document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";
HTML 文件路径
文件路径用来描述某个文件的路径，它可以是图片、网页、样式表、或者JavaScript脚本
路径 描述 <img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹 <img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中 <img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中 <img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中
HTML 头部元素
<head>标签是所有头部元素的容器，内部可以包含脚本、指定浏览器可以再哪里找到样式表，提供元信息等等，以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
标签 描述 <head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。
HTML 表单
HTML的表单用于获取不同用户的输入
form元素
<form> . form elements . </form>表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的type属性。
<!DOCTYPE html> <html> <body> <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form> </body> </html>
<!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> </body> </html>
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p> </body> </html>
Action属性
action通常用来指定表单提交的时候的动作，通俗的来讲，action填什么，表单就提交到哪里
Name属性
如果想要正确的提交表单，那么每个imput元素都必须有一个name属性，否则无法正确的被提交
<input type="text" value="Mickey"> <input type="text" name="lastname" value="Mouse">假如想要提交如上两个属性，第一个属性是无法正确提交的，因为没有name属性
form标签所有可能的属性
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。
