1、HTML
整个HTML标签就是一个文档树；
HTML是一种超文本标记语言；是一种制作万维网的页面标准语言。
HTML的模型分析：
HTML一般的规则：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>(1)、DOCTYPE的作用：标准兼容模式的开启，在所有浏览器中显示的页面均相同。
<!DOCTYPE html>是推荐使用的一种。
(2)、对于空格只是为了好识别，没有严格规定必须这样；
(3)、对于中间的单引号/双引号，在html中一样，无区别；
(4)、HTML的注释形式：<!-- -->
2、HTML文档分析
(1)、meta
负责页面的编码、刷新、跳转新的页面、搜索关键词等....
i>页面编码(告诉浏览器采用什么编码)
<meta http-equiv="content-type" content="text/html;charset=utf-8">ii>刷新和跳转
<meta http-equiv='Refresh' Content='30'>含义：30秒钟刷新一次；
iii>关键词
<meta name='keywords' Content='西安市'>3、<head>中的书写
i>、<title>........</title>: 中间写网页名字，
ii>、<link ....... />: 写外部文件的连接位置，
例：css
<link rel="stylesheet" type="text/css" href="css/common.css">iii>、<style>.........<style>: 中间写各种样式，
iv>、<script src = '路径'></script>: 调用外面的js文件，
<script type = 'text/javascript'>..........</script>: 中间写js代码，
4、常用标签
一般写在：<body>.....</body>；
标签一般分为2组：块级标签(div、h1、p......)和行内标签(a、span、select.....)；
div和span
<div>123</div> #显示完换下一行
<span>123</span> #显示完不换行
<div><div> </div> #显示标签<div>和一个空格( )p和br
<p></p> #上下之间间隔一行
<br/> #换行a
<a href = '网址'></a> #调转网址
<a href = 'http://11596096.blog.51cto.com' target = '_blank'></a> #target表示在新的页面打开H
H1 H2 H3 H4 H5 H6：字体大小，从大---->小
select
(1)、不划分组的：
<select multiple = ‘multiple’ size = ‘1’>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>(2)、划分组的：
<select>
<optgroup label = '河北省'>
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label = '陕西省'>
<option>西安市</option>
<option>咸阳市</option>
</optgroup>
</select>运行结果：
input下面：
(1)、checkbox
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>运行结果：
(2)、redio
男：<input type = 'radio' name = 'gen'/>
女：<input type = 'radio' name = 'gen'/>
保密：<input type = 'radio' name = 'gen'/>运行结果：
(3)、password
<input type = 'text' maxlength = '2' /> #后面的参数表示最多输入2个字母
<input type = 'password'/>运行结果：
(4)、button和submit
<input type = 'button' value = '提交'/> #就是一个单纯的提交按钮
<input type = 'submit' value = '提交'/> #与后台交互的提交运行结果：
(5)、file
<input type = 'file' />运行结果：
textarea
<textarea>ddddddddddddddddddd</textarea>运行结果：
label
主要作用：更加友好(点击姓名，自动在框框中出现光标)；
<label for = 'name2'> #点击姓名,光标出现在第二个框中;
姓名：<input id = 'name1' type = 'text' />
<br/>
姓名：<input id = 'name2' type = 'text' />
</label>运行结果：
ul ol dl
<ul>
<li>西安</li>
<li>北京</li>
<li>上海</li>
</ul>
<ol>
<li>湖南</li>
<li>四川</li>
<li>广州</li>
</ol>
<dl>
<dt>河北省</dt> #以dt中间的内容为表头
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>陕西省</dt>
<dd>西安</dd>
<dd>渭南</dd>
</dl>运行结果：
table
(1)、都写在一起
<table border= ‘1’> #默认表格形式打印
<tr> #<tr>是行的意思
<th>IP</th> #<th>是表头的意思,默认居中，黑体打印(列)；
<th>IDC</th>
<th>Status</th>
</tr>
<tr>
<td>IP</td> #<td> #列的形式打印;
<td>IDC</td>
<td>Status</td>
</tr>
<tr>
<td>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
</table>
(2)、table的头和身体分开(并且合并了行、列)
<table border = '1'>
<thead>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan = '2'>IP</td> #2列合一列
<td>Status</td>
</tr>
<tr>
<td rowspan = '2'>192.168.3.32</td> #2行合一行
<td>北京</td>
<td>online</td>
</tr>
<tr>
<td>北京</td>
<td>online</td>
</tr>
</tbody>
</table>运行结果：
fieldset
<fieldset>
<legend>登录</legend>
<p>喜欢：</p>
<p>爱好:</p>
<p>城市:</p>
</fieldset>运行结果：
form
<form action = '/' method = 'POST'>
Name:<input type = 'text'/>
<br/>
pwd:<input type = 'password'>
<br/>
<input type = 'button' onclick = 'alert(123)' value = '提交'/> #onclick是一个事件,在js中再说。
<input type = 'submit' value = '提交'/>
</form>运行结果：
5、HTML上述例子的完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
</head>
<!--
<body>
<div>alex1</div>
<div>alex2</div>
<div>alex3</div>
<span>zhangsan</span>
<span>zhangsan</span>
<div><div> </div>
</body>
-->
<!--
<body>
<p>ddddddddddddd</p>
<p>ddddddddddddd</p>
<div>ddddddd<br/>ddddddddddddd</div>
</body>
-->
<body>
<!--
<a href = 'http://11596096.blog.51cto.com' target = '_blank'
dashen = 'alex'>老男孩</a>
目录：
<div>
<a href = '#id1'>第一章</a>
<a href = '#id2'>第二章</a>
<a href = '#id3'>第三章</a>
</div>
内容：
<div id = 'id1'>
<p>第一章内容</p>
</div>
<div id = 'id2' style = 'height:1000px; background-color:red;'>第二章内容</div>
<div id = 'id3' style = 'height:1000px;'>第三章内容</div>
<h1>ddddddd</h1>
<h6>ddddddddddddd<h6>
<select multiple = ‘multiple’ size = ‘1’>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgroup label = '河北省'>
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label = '陕西省'>
<option>西安市</option>
<option>咸阳市</option>
</optgroup>
</select>
-->
<!--
<input type = 'text' maxlength = '2' />
<input type = 'password'/>
-->
<!--
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
<input type = 'checkbox'/>
-->
<!--
男：<input type = 'radio' name = 'gen'/>
女：<input type = 'radio' name = 'gen'/>
保密：<input type = 'radio' name = 'gen'/>
<br/><br/>
-->
<!--
<input type = 'button' value = '提交'/>
<input type = 'submit' value = '提交'/>
<br/><br/>
-->
<!--
<input type = 'file' />
<textarea>ddddddddddddddddddd</textarea>
-->
<form action = '/' method = 'POST'>
Name:<input type = 'text'/>
<br/>
pwd:<input type = 'password'>
<br/>
<input type = 'button' onclick = 'alert(123)' value = '提交'/>
<input type = 'submit' value = '提交'/>
</form>
<!--
<label for = 'name2'>
姓名：<input id = 'name1' type = 'text' />
<br/>
姓名：<input id = 'name2' type = 'text' />
</label>
<ul>
<li>西安</li>
<li>北京</li>
<li>上海</li>
</ul>
<ol>
<li>湖南</li>
<li>四川</li>
<li>广州</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>陕西省</dt>
<dd>西安</dd>
<dd>渭南</dd>
</dl>
-->
<!--
<table border= ‘1’>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
<tr>
<td>IP</td>
<td>IDC</td>
<td>Status</td>
</tr>
<tr>
<td>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
</table>
<table border = '1'>
<thead>
<tr>
<th>IP</th>
<th>IDC</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan = '2'>IP</td>
<td>Status</td>
</tr>
<tr>
<td rowspan = '2'>192.168.3.32</td>
<td>北京</td>
<td>online</td>
</tr>
<tr>
<td>北京</td>
<td>online</td>
</tr>
</tbody>
</table>
<fieldset>
<legend>登录</legend>
<p>喜欢：</p>
<p>爱好:</p>
<p>城市:</p>
</fieldset>
-->
</body>
</html>转载于:https://blog.51cto.com/wait0804/1864479
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
