1.认识HTML：
html不是一种编程语言，是一种标记语言。标记语言是由一套标识标签组成的。html使用标签来描述网页。
<!-- 设置文档类型为:html -->
<!DOCTYPE html>
<!-- html是根标签,有且仅有一个,代表整个文档,lang设置页面默认语言为english -->
<html lang="en">
<!-- head是头标签,它的内容供浏览器读取,除title外, 其它内容用户并不关心 -->
<head>
<!-- 设置当前页面中的文本采用的默认编码字符集为utf8 -->
<meta charset="UTF-8">
<!-- 设置页面标题文本内容,显示在游览器窗口的标签页 -->
<title>Document</title>
</head>
<!--浏览器显示的内容-->
<body>
</body>
</html>
2.HTML标签
<h1>—-<h6>用于标题文本，会使字体变大,h1>h2>h3>h4>h5>h6>h7
<p>标签 段落标签
<strong>文字产生加粗效果
<span>对被用来组合文档中的行内元素
<em>文字斜体
<a>超链接，他有一个必不可少的属性 href（超链接地址）
href*属性：设置跳转的网页地址
target属性：设置跳转的目标
创建锚点和锚链接
锚点也是一种超链接，是页面内进行跳转的超链接
第一步：创建锚点 <a name="锚点名称"></a>
第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a
<hr />在页面中添加一条水平分隔线
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a name="md">创建锚点</a> <h1>用于标题文本，会使字体变大</h1> <h2>用于标题文本，会使字体变大</h2> <h3>用于标题文本，会使字体变大</h3> <h4>用于标题文本，会使字体变大</h4> <h5>用于标题文本，会使字体变大</h5> <h6>用于标题文本，会使字体变大</h6> <hr /> <p>段落标签</p> <hr /> <strong>文字加粗</strong> <hr /> <em>文字斜体</em> <hr /> <a href="https://www.baidu.com/">超链接</a> <a href="#md">锚点</a> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.列表
<ul>无序列表
无序列表是一个没有顺序项目的列表，默认粗体圆点进行标识
无序列表-列表符号:type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符
<ul >
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
无序列表-嵌套
<ul>
<li>柚子
<ul>
<li>沙田柚</li>
<li>蜜柚</li>
</ul>
</li>
<li>荔枝</li>
<li>苹果</li>
</ul>
<ol>有序列表
有序列表也是一列项目，只是列表项目使用的是数字进行标记
有序列表-列表符号
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4
type=”I” I II III
type=”i” i ii iii
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
有序列表-嵌套
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>果汁</li>
<li>牛奶</li>
</ol>
<dt>定义列表
定义列表不仅仅是一列项目，而是项目及其注释的组合.定义列表,类似于名称解释,常用用来做友情链接
<dl>
<dt>php中文网</dt>
<dd>学习网页前后端</dd>
</dl>
dd是对dt的解释
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <p>无序列表</p> <ul > <li>内容一</li> <li>内容二</li> <li>内容三</li> </ul> <ul type="circle"> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ul> <ul type=“disc> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ul> <p>无序列表嵌套</p> <ul > <li>中国</li> <ul > <li>北京</li> <li>上海</li> <li>广州</li> </ul> <li>美国</li> <ul > <li>华盛顿</li> <li>纽约</li> <li>夏威夷</li> </ul> </ul> <p>有序列表</p> <ol> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol> <ol type="1"> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol> <ol type="A"> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol> <ol type="a"> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol> <p>有序列表嵌套</p> <ol> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>果汁</li> <ul> <li>苹果汁</li> <li>橙汁</li> </ul> </ol> <P>定义列表</P> <dl> <dt>php中文网</dt> <dd>学习网页前后端</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.表单和表格
<table>表格标签
用它定义一个表格
<caption>表格标题
<th>表头（加粗，居中）
<tr>行标签：
<tr>可以定义表格中的一行，一个<tr></tr>表示一行。
<td>单元格标签:
<td>可以定义表格中的一个单元格，<td></td>表示一个单元格
rowspan合并行 colspan和并列
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>档案</caption> <tr> <th >姓名</th> <th>性别</th> <th>爱好</th> </tr> <tr> <td>张三</td> <td>男</td> <td>旅游</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
border 规定表格边框的宽度。
cellpadding 规定单元边沿与其内容之间的空白。
cellspacing 规定单元格之间的空白。
<form>表单标签
表单是一个包含表单元素的区域，包括起来的都是表单的内容
(1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
(2) 表单涉及:form,label,input,select,textarea,button标签
(3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
Action和input确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
<input>标签的掌握
常用type类型：
<input type="" name="" value="" />
type="text" 单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交 type="image"图片提交
type="file" 上传文件
type="reset"重置
type="hidden" 隐藏
<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
<label>标签的使用
<label></label>
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的for 属性应当与相关元素的 id属性相同。
<button type="button">提交按钮
<form action="html.do" method="get">
用户名: <input type="text" name="user" />
<input type="submit" value="提交" />
</form>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>表单</p> <form action="" method="get"> <p>单行文本输入框</p> <input type="text" name="" value="单行文本输入框" /> <p>密码</p> 密码<input type="password" name="" value="密码" > <p>单项选择</p> <input type="radio" name="a" value="语文" >语文 <input type="radio" name="a" value="数学" >数学 <input type="radio" name="a" value="英语" >英语 <p></p> <input type="checkbox" name="b" value="吃饭" >吃饭 <input type="checkbox" name="b" value="睡觉" >睡觉 <input type="checkbox" name="b" value="打豆豆" >打豆豆 <p>提交</p> <input type="submit" name="" value="提交" > <p>上传文件</p> <input type="file" name="" value="上传文件" > <p>重置</p> <input type="reset" name="" value="重置" > </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.图片和媒体
<img/>图片标签
写法：<img src="" alt="" width="" height="" />
src="" 图片路径
alt="" 图片含义
width="" 图片宽度 和图片大小保持一致
height="" 图片高度 和图片大小保持一致
<img src="" alt="" width="" height=""/>
video
src*属性用来设置视频的url数据
controls播放按钮
<video src="" controls="controls" width="400"></video>
6.CSS的使用方式
内联样式:直接在标记内部通过style属性来写相应的样式
内部样式：在文档的<head>..</head>通过<style>样式...</style>
<style type='text/css'>
</style>
链接外部文件:在<head></head>之间通过<link />引入
外部的css文件，css文件扩展名为.css结尾
<link href='目标文档的URL' rel='stylesheet' type='text/css' charset='utf-8' />
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test1{/*ID选择器*/
color:pink;
}
.test{/*类选择器*/
color:green;
}
p{/*类选择器*/
color:red;
}
</style>
</head>
<body>
<h2>选择器的优先级例子</h2>
<p >this is a test</p>
<p class='test' >this is a test</p>
<p class='test' id='test1'>this is a test</p>
<p class='test' id='test1' style='color:yellow;'>this is a test</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
