1.互联网的三大基石
- HTML：Hyper Text Markup language 超文本标记语言
- HTTP：Hyper Text Transfer Protocol 超文本传输协议
- URL： Uniform Resource Location 统一资源定位符
2.HTML入门
（1）为什么要学习HTML？
- 需求：科学技术的发展，使得信息传输量快速增大，并且对页面编程的美观要求更高。生活中遇到的问题推动着技术的发展。
- 信息传输量加大，对页面设计要求提高
- HTML作用：把网页信息格式化的展示出来
（2）什么是HTML：
- HTML：Hyper Text Markup language 超文本标记语言
- 超文本：文本信息，图片，视频，语音，超链接等
- 标记：标签的体现
3.HTML、CSS、JS之间的关系
Html是基础，是框架，可以完成基本的功能，相当于人的骨骼，但是不够美观。Css是血肉，丰富了html框架，使得界面更加的美观，增加了静态的展现。相当于给人增加了血肉。html是css的基础，但是又没动态的效果，想加入动态的效果，就需要到js了。Js是在css，和html基础上面使得网页增加动态结果，js相当于人的灵魂。
4.html中标题标签常用的属性
标签属性是h1-h6，是自动给显示的内容加粗加黑显示。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--标题标签会加粗加黑，会自动换行-->
<h1 align="center">走进新时代</h1>
<hr width="500px" color="red" align="center" size="3"/>
<h2>走进新时代</h2>
<h3>走进新时代</h3>
<h4>走进新时代</h4>
<h5>走进新时代</h5>
<h6>走进新时代</h6>
<!--p标签不会输出文本的格式-->
<p>
宝瓶州落魄山泥瓶巷陈皮皮，<br/>开山大弟子赔钱货，崔东山，
大水怪周米粒。
</p>
<!--pre会输出文本的格式-->
<pre>宝瓶州落魄山泥腿巷陈皮皮，开山大弟子赔钱货，崔东山，
大水怪周米粒。</pre>
</body>
</html>5.常用的列表标签
- 常用的列表标签有三种：第一种是<ol>表示有序的列表
- 第二种是<ul>表示无需的列表
- 第三种是<dl>是自定义的列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--图片-->
<img src="img/u=1345759728,698722148&fm=26&gp=0.jpg" />
<!--表格设置-->
<table border="1px" cellpadding="20px" cellspacing="0px">
<tr height="100px" align="center">
<td width="100px" align="center">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr height="100px">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr height="100px">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr height="100px">
<th>12</th>
<th>12</th>
<th>13</th>
</tr>
</table>
</body>
</html>6.html中小标签
- <u>下划线标签 为文本加上下划线
- <i>斜体标签，可以在文本文字改成斜体
- <b>加粗加黑的标签
- <del>为字体带上删除线的标签
- <sup>上标标签
- <sub>下标标签
- <small>使字体变小的标
- <big>使字体变大的标签
- <marquee>使文字不断弹出的标签
- <br>换行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--the title lable h1-h6 is auto 加粗加黑，会自动换行-->
<h1 align="center">走进新时代</h1>
<hr width="500px" color="red" align="center" size="3"/>
<!--u标签是下划线-->
<h2><u>走进新时代</u></h2>
<!--i标签是斜体-->
<h3><i>走进新时代</i></h3>
<!--del加上删除线-->
<h4><del>走进新时代</del></h4>
<!--dl跑马灯-->
<marquee direction="right" scrollamount="40px">陈皮皮</marquee>
<p>
宝瓶州落魄山泥瓶巷陈皮皮，<br/>开山大弟子赔钱货，崔东山，
大水怪周米粒。
</p>
<pre>宝瓶州落魄山泥腿巷陈皮皮，开山大弟子赔钱货，崔东山，
大水怪周米粒。</pre>
</body>
</html>7.HTML超链接标签
<a>标签，里面得href表示超链接得地址，name是该超链接得地址，target设置在网页打开得方式。
- 有两个作用1.跳转到特定得页面过去。可以打开href中得超链接地址得页面。
- 2.锚点功能，可以根据href填写得#名字跳转到页面得任意得位置。
8.HTML图片标签
- img (不会自动的换行)
- src:引入图片的位置{相对路径、绝对路径、网络路径 }
- title：图片的标题
- border:图片的边框
- alt：图片无法正常显示的时候显示的属性
- align:图片的位置 ，必须有参照物
9.HTML 表格标签
- table表格的自适应能力 (align="center")整个的表格整体居中
- width="300px" height="300px" 表格的宽度和高度标签
- cellpadding：内容和单元格的距离
- cellspacing：单元格和单元格的距离
- tr：行标签
- td/th：列 标签
- td:普通的列
- th:标题列:自动的居中，加黑效果
- colspan:列合并
- rowspan：行合并
- backgroundcolor：表格的背景颜色
10.html表单标签
form是表单标签，其中属性Action表示表单提交的位置，method表示表单提交的方法。method有两种方法一种是get，一种是post，最大的区别是get会将提交的内容在url中显示，二post提交的内容不会url中显示，所以post安全性更高一些。
<input>表示普通的文本框，value属性表示文本框的值，type表示 文本框的类型，其中type为radio表示的单选框，其中跟着checked属性的为默认选择项；type为checkbox选项时为多项选择框，value为要传递的值；当type为file时表示文件选择框，当为hidden时候表示隐藏框，Select标签为下拉式选择框，其中value为传递的值，option为下拉选项中的值；当为submit时，表示提交按钮，可以提交数据，为reset时清空已经写好的内容，为button时普通的按钮，没有提交数据的功能.<textarea>是多行文本框，row表示文本框的行数，colw表示多行文本框的列数。
<form>
<!--the plain text box-->
The Account:<input type="text" name="account"/> <br/>
The Password:<input type="paswword" name="pwd" value="123" /><br />
<!--the gender box-->
boy：<input type="radio" name="sex" />
girl:<input type="radio" name="sex" /><br />
<!--the Multiple selection basket -->
play basketball:<input type="checkbox" />
smoking :<input type="checkbox" />
reading:<input type="checkbox" /><br />
<!--the multiple text box-->
Introduce to yourself:<textarea rows="12" cols="12"></textarea><br />
<!--select the fiel bottom-->
<input type="file" name="fiel"/>
<!-- -->
<select>
<option> ameiacan </option>
<option> cbj e</option>
</select>
</form>11.ifram标签的作用
Ifram可以将一个html文件在一个html页面打开，可以重复的在一个窗口打开不同的xml文件。
12.div的作用
Div本身没有任何意义，它可以将网页进行模块化的划分。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
