<!DOCTYPE html>是文档声明，为浏览器更好显示内容,html就是html 5。
1.能显示中文：在head中添加
<meta charset="utf-8">1.html标签
html文档： <html>...</html>
主体内容： <body>...</body>
段落： <p>...</p>
html链接: <a href="www.baidu.com">链接到百度</a>
html图片： <img src="img.jpg" width=“102” height="104" alt=“tupian”/>alt用于图片显示不出来显示的文字
注释： <!-- 注释内容 --> 第二种方式是/*注释内容*/
预留格式（保留空格符和换行符）： <pre>...</pre>
长引用： <blockquote cite="填网站地址">引用的内容</blockquote>
缩进标记(搜索优化方面)： <addr title="huangjc">HJC</addr> 搜索HJC也能搜索到huangjc
纵观调控html属性（预先加载项）： <head>...</head>
反向重写(在body内)： <bdo dir=“rtl”>内容</bdo>
1.1文本标签
加粗： < b> <strong> 斜体： <i> <em> 下标字： <sub> 上标字： <sup> 删除字： <del> 大号字： <big> 小号字： <small>
2.html属性
2.1 style：
用在标签<body><p><h1>等<>里面
背景颜色：background-color 可=yellow，blue等
字体颜色：color
字体类型：font-family
字体大小：font-size
字体对其方式：text-align 可=center居中
2.2 target：
用在链接<a>里面
新页面打开： _blank
不知道是啥： _top
3.样式表
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><!--内部样式表-->
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head><!--内联样式-->
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>4.html链接
html链接: <a href="www.baidu.com">链接到百度</a>
移动到当页某位置：
导航栏： <a href="（如果是其他页面这里填链接）#随便名字">会显示的名字</a>
在多页面同窗下指定一个框内打开某页面：<a href="（如果是其他页面这里填链接） target=“那个特定框的name名" >会显示的名字</a>
被导航处： <h1><a name=“对应的随便名字”>...</a></h1>
发送邮件：
<!--包含发送人，操送人，密件操送，主题，内容，%20代表空格-->
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
5.html图像
html图片： <img src="img.jpg" width=“102” height="104" alt=“tupian”/>alt用于图片显示不出来显示的文字
图片链接： <a href=""><img src=“” /></a>
背景图像： <body background="/i/img.jpg">
文本对其图像： <img src="/i/img.jpg" align="bottom"> 还有middle，top，left，right
图中图：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
图中图的坐标确定：http://www.w3school.com.cn/tiy/t.asp?f=html_ismap
6.表格table
margin外边界
padding内边界
<html>
<body>
<!-- 格式-->
<table border=“1”>
<caption>标题</caption>
<tr>
<th>表头</th> <!--字体会被加粗，可不写-->
<th colspan="2">作者</th> <!--colspan跨两列-->
</tr>
<tr>
<td rowspan="2">第一行第一列</td> <!--rowpan跨两行-->
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第二列</td>
<td> </td>
</tr>
<tr>
<td>
<table border="2"> <!--表中表-->
<tr>
<td>表中表第一行第一列</td>
<td>表中表第一行第二列</td>
</tr>
<tr>
<td>表中表第二行第一列</td>
<td>表中表第二行第二列</td>
</tr>
</table>
</td>
<td>
<ul> <!-- 这是无序列表，可通过type属性修改符号，有square，circle。有序列表是<ol>-->
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</td>>
</tr>
</table>
</body>
</html>结果：
特殊调整：
<table cellpading="10" >：增加文本距离单元格框10px,包括上下左右
<table cellspacing="5" >:增加单元格与单元格之间5px，包括上下左右
table，tr，td还支持 style样式修改背景属性，如添加颜色，插入背景图片。
tr，td还支持对齐align属性。
table包含frame属性，用以控制边框样式。有box，above，below，hsides，vsides
7.块div和span
<!DOCTYPE html>
<html>
<head>
<style>
.abc {
background-color: black;
color:white;
margin: 20px;
padding: 20px;
}
span.red{
color:red;
}
</style>
</head>
<body>
<div class="abc">
<h1>我是谁</h1>
<p>我是你<span class="red">大爷</span>啊，我!</p>
</div>
</body>
</html>结果：
8.布局
<!-- 本方法是使用html5布局，用div请看注释 -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
header{ /*如果是div,这需要改成#header*/
background: black;
color: white;
text-align:center;
padding: 5px;
}
nav{
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
section{
width: 350px;
float: left;
padding: 10px;
}
footer{
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<header> <!-- 如果是div,这里要改成<div id="header"> -->
<h1>这是标题</h1>
</header>
<nav>
导航1<br>
导航2<br>
导航3<br>
</nav>
<section>
<p>这是内容</p>
</section>
<footer>
<p>Copyright 黄继聪</p>
</footer>
</body>
</html>还有表格布局，这里没练习
9.响应式设计
使用div的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 让代码中的中文能在浏览器中显示 -->
<style type="text/css">
#city{
float: left; /*这个是响应式的关键,浮动开启*/
margin: 5px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid red;/*没有solid的话在浏览器是看不到边界的*/
}
</style>
</head>
<body>
<h1>响应式网站设计</h1>
<p>仅仅是练习而已</p>
<div class="city">
<h1>浮动框第一部分</h1>
<p>aaabbbcc第一</p>
</div>
<div class="city">
<h1>浮动框第二部分</h1>
<p>aaabbbcc第二</p>
</div>
<div class="city">
<h1>浮动框第三部分</h1>
<p>aaabbbcc第三</p>
</div>
</body>
</html>w3c推荐使用Bootstrap创建响应式⭐
<!DOCTYPE html>
<html>
<head>
<!-- 显示中文语句 -->
<meta charset="utf-8">
<!-- 控制窗口语句 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 获取相关样式语句,就是那些class指向的对象 -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>两个div估计是为了用两个样式</h1>
<p>没什么好说的</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>小标题1</h2>
<p>段落1</p>
</div>
<div class="col-md-4">
<h2>小标题2</h2>
<p>段落2</p>
</div>
<div class="col-md-4">
<h2>小标题3</h2>
<p>段落3</p>
</div>
</div>
</div>
</body>
</html>10.框架frame（注意：frameset是在body之外）
<!-- 这是设置本页面的框架的 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- 先用frameset划分区域,再用frame连接html文件显示内容 -->
<frameset rows="20%,50%,20%"> <!--20%可以直接改成像素-->
<!-- 在frame中添加了noresize="noresize"后边界不会被移动 -->
<frame noresize="noresize" src="">
<!-- 混合框架使用 -->
<frameset cols="30%,70%">
<!-- 这是导航框 -->
<frame noresize="noresize" src="test2.html">
<!-- 给这个框架赋予名字,然后导航就能target到这里 -->
<frame src="frameA.html" name="showframe">
</frameset>
<frame noresize="noresize" src="">
<noframes><!-- 本代码段为显示不了frames的浏览器提供的 -->
<body>
<p>没有frameset功能的浏览器才会转向显示这个noframes，</p>
</body>
</noframes>
</frameset>
</html><!-- 这是设置导航框的，这是上面对应的text2.html部分 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="frameA.html" target="showframe">frameA</a><br>
<a href="frameB.html" target="showframe">frameB</a><br>
<!-- 指向c页面 -->
<a href="frameC.html" target="showframe">frameC</a><br>
<!-- 指向c页面练习章节,在c页面里有已练习命名的标题 -->
<a href="frameC.html#lianxi" target="showframe">练习</a><br>
</body>
</html>11.iframe
<!-- 在页面设置一个窗来显示特定东西或指定链接 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<iframe src="frameC.html" name="iframe"></iframe>
<p><a href="http://www.baidu.com" target="iframe">跳转百度</a></p>
</body>
</html>12.html头部
<head>包含<title><base><link><meta><script><style>
<title>对搜索有关键作用。
<base>规定链接的默认地址和target（比如新页面打开等）。如果在body的<a>
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head><link>主要用于链接样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head><style>创建样式表
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head><meta>元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />13.表单form（及部分input案例）
<!DOCTYPE html>
<html>
<head>
<title>测试form，比如登陆页面，客户意见</title>
<meta charset="utf-8">
</head>
<body>
<!-- 表单被提交后,会被发送到action所指的页面上(就是哪个~.asp) 如果action被省略,会被提交到当前页面-->
<!--method属性有两个值,GET和POST,如果用get,表单信息能在地址栏看得到,post则不行,有密码用post-->
<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="GET">
<fieldset style="width: 240px;margin-left: 500px;margin-top: 0px"> <!--创建框,框住-->
<legend>账号登陆</legend> <!--表单抬头-->
请输入你的账号:<br/>
<!-- 在input中,没有name属性,则本条信息不会被提交 -->
<input type="text" name="account" value="hjc"><br/> <!-- value填入值,有默认-->
请输入你的密码:<br/>
<input type="password" name="password" value="123"><br/>
<!-- 单选框 -->
<input type="radio" name="sex" value="male" checked> Male <!--checked表示默认选择-->
<input type="radio" name="sex" value="female" > Female
<br/>
<!-- 复选框 -->
<input type="checkbox" name="mystyle" value="绅士">绅士
<input type="checkbox" name="mystyle" value="潮男">潮男
<input type="checkbox" name="mystyle" value="幽默">幽默
<input type="checkbox" name="mystyle" value="聪明">聪明
<input type="checkbox" name="mystyle" value="机智">机智
<br/>
<!--下拉选择框-->
<select name="hobby">
<option value="basketball">basketball</option>
<option value="football">football</option>
<option value="pingpong" selected>pingpong</option> <!--selected预选项-->
<option value="running">running</option>
</select>
<br/><br/>
<!-- 可输入文本框 -->
<textarea name="message" rows="10" cols="30">nothings to input</textarea>
<br/>
<!-- 带下拉的输入框 -->
浏览器选择：
<input list="browsers" name="browsers">
<datalist id="browsers"> <!--这里必须是id-->
<option value="IE">Internet Explorer</option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="opera"></option>
<option value="Safari"></option>
</datalist>
<br/>
<!-- 对数字进行限制 -->
你女朋友有多少个：
<input type="number" name="quantity" min="1" max="10">
<br/>
<!-- 颜色选择器 -->
你喜欢什么颜色:
<input type="color" name="color" value="#fff000">
<br/>
<!-- 滑块选择 -->
你多少岁:
<input type="range" name="points" min="10" max="30">
<br/>
<!-- 年月日 -->
你生日:
<input type="date" name="bday"><br/>
<!-- 年月 -->
你生日的月份:
<input type="month" name="bdaymonth"><br/>
<!-- 时间 -->
出生时间:
<input type="time" name="usr_time"><br/>
<!-- 日期和时间同一个框 -->
出生年月日和时间:
<input type="datetime-local" name="bdaytime">
<br/>
<!-- 输入正确的电子邮箱 -->
电子邮箱:
<input type="email" name="email"><br/>
<!-- bing搜索 -->
搜索:
<input type="search" name="bingsearch"><br/>
<!-- URL地址:竟然还要输入http：// -->
URL地址:
<input type="url" name="homepage">
<!-- 弹窗的按钮 -->
<button type="button" onclick="alert('这里啥都没，哈哈哈')">有种按我啊！</button>
<!--这里只是为了增加空格-->
<!-- 确定 -->
<input type="submit" value="确定"> <!--value是按键上显示的字-->
</fieldset>
</form>
<!-- 收到的表格类似于 account=hjc,password=123,sex=Male -->
</body>
</html>结果：
14.input属性
readonly ：输入框只读不能修改
disabled ：禁止输入，内容也不会提交
size=“40”：规定输入框大小
maxlength="10" ：字符最大长度设置
以下是html5的：
autocomplete: 输入一次后，再次输入可自动补全。autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。
novalidate=“novalidate”：适用于<form>，关闭智能表单，就是说判别是否eamil等的那些功能失效。
autofocus :页面新开时，光标自动聚焦在特定输入框中，不需要点击框再输入
form="<form>的ID" :即使某input不在<form>中，但这<form>有ID，则可通过form指向该<form>实现再框外书写input
formaction="xxx/xxx.php" ：用于type="submit"和"image"的input中，提交不同于form的action的php文件
formenctype="multipart/form-data" :用于type="submit"和"image"的input中，以不同编码形式提交,覆盖form的编码形式
formmethod="post" :用于type="submit"和"image"的input中，设定发送方式GET或POST，覆盖form的method
formvalidate="formnovalidate" ：用于type="submit"的input中，提交表单不对input进行验证，覆盖form的novalidate
formtarget="_blank" :用于type="submit"和"image"的input中，提交表单收到的反馈显示在哪个页面上
height=""和width="" :用于type="image"的input中,规定图片大小（与原始<img >差别在于这种可以获取你点击图片时的坐标）
list="datalist的id" ：用于创建带列表的输入框，13节的案例中有
min=""和max="" :最小最大值，属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple ：多文件input，适用于：email和file
pattern="[A-a]{3}" :正则表达式，就是规则。定义输入规则。[A-a]{3}代表需要输入3个字母，输入类型：text、search、url、tel、email、and password
placeholder="请输入用户名" ：在用户输入值之前显示在输入字段中，输入类型：text、search、url、tel、email 以及 password。
required :提交前必填字段。输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
step="10" :规定只能填10的倍数，包括负值。输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。