html结构

## html结构

- 标签类型

```
<head> </head> // 主动闭合标签
<br /> // 自闭合标签
<meta charset="UTF-8"> // 自闭合标签
```

- 标签属性

```
<html lang="en"> // lang 是 html 这个标签的属性
```

- 注释内容

```
<!--注释内容--> // 注释一行或者多行
```

- 主要结构

```
<html lang="en"> // HTML 页面的根元素
<head> // HTML 文档的元数据，例如：定义编码格式 <meta charset="utf-8">
<title> </title> // 描述了网站的标题
</head>
<body> // 网站的主体页面
<script> // javascript 脚本
</script>
</body>
</html>
```

## head标签

HTML 文档的元数据，包含了所有的头部标签元素。在 `<head>` 元素中你可以插入脚本 `scripts`, 样式文件`CSS`，及各种 `meta` 信息，还可以添加在头部区域的元素标签为: `<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>`

- 定义编码格式

```
<meta charset="utf-8" /> // 定义以什么字符集显示网页
```

- 定义自定刷新网页

```
<meta http-equiv="Refresh" Content="3" /> // 每 3 秒刷新一次网页
<meta http-equiv="Refresh" Content="3;Url=http://baidu.com" /> // 3 秒后跳转到指定的网页
```

- 为搜索引擎提供关键字

```
<meta name="keywords" content="杨金恒的个人网站,Python学习网站,javascript学习教程" />
```

- 描述网站的信息

```
<meta name="discription" content="杨金恒的个人网站，可以在这里学到Linux,python,SQL各种知识" />
```

- IE浏览器兼容设置，使用IE那个版本打开

```
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> // 自IE6以后微软开始遵循标准了
```

- 定义网站显示的小图标

```
<link rel="shortcut icon" href="image/favicon/ico">
```

## body标签

标签分为块级标签，行内标签，例如：`<p> <h1>`，它们都会占用一行，而 `<br /> <span>` 是行内标签，它有多大内容占多大地方。

### 特殊字符

- 空格，一般 html 只识别文字中的一个自然空格，想多多个空格，需要使用下面的语法

```
<a href="http://www.baidu.com"> 杨金&nbsp;&nbsp;&nbsp;&nbsp;恒 </a> // 四个空格
```

- 大于号，小于号，特殊符号有很多，不再列举

```
<a href="http://www.baidu.com"> 杨金&lt;a&gt;恒 </a>
```

### 文本段落

- 段落，所谓段落就是会在一段文字的开头和结尾留足够空白，以区分这是一段话

```
<p>杨金恒的个人网站</p>
<p>这是另外一个段落</p>
```

- 换行，特性是产生一个换行

```
<p>杨金恒的个人网站<br />这里记录了我的生活</p> // <br /> 自闭合标签，产生段落内的换行
<p>这是另外一个段落</p>
<p>这是又有一个段落</p>
```

### 级别标签

> 我目前已知 HTML 标签分两种，一种是块级标签，它占用一行，一中是行内标签，它只占用自己的大小。

- 块级标签，特性是占用一行

```
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
```

- 行内标签，有多少内容占多大位置，它是白板标签没有任何特性，可以由 CSS 填充标签

```
<p>这是又有一个段落<span>这是一个空白标签</span></p>
```

- 它是块级别的白板标签没有任何特性，它占用一行，它设置一个属性后，可以通过js找到这个标签

```
<div>
<div>
</div>
</div>
```

### 表单和输入

- 文本输入框标签，属于行内标签

```
<form action="http://baidu.com" method="POST"> // 提交标签内标签到 action
<input name="user" type="text" value="default" /> // 明文输入框，value 是默认值
<input name="pwd" type="password" /> // 密码输入框
<input type="button" value="登陆" /> // 设置一个按钮，按钮上有文字
<input type="submit" value="提交" /> // 提交一个数据到 from 的 action 的按钮
</form>
```

### 按钮和提交

- 单选框，当 name 相同时这些选项互斥，checked 表示默认选中

```
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="M" checked="checked"/>
女：<input type="radio" name="gender" value="F"/> // 提交将获得 value 内的值
</div>
<input type="submit" value="提交" />
</form>
```

- 复选框

```
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="M" checked="checked"/>
女：<input type="radio" name="gender" value="F"/> // 提交将获得 value 内的值
<p>爱好</p>
篮球：<input type="checkbox" name="aihao" value="1" /> // 后台将获取到 name 的值为列表
足球：<input type="checkbox" name="aihao" value="2" />
网球：<input type="checkbox" name="aihao" value="3" />
台球：<input type="checkbox" name="aihao" value="4" checked="checked" /> // 默认选中
</div>
<input type="submit" value="提交" />
</form>
```

### 上传文件按钮

- 上传文件, type=”file” 可以上传一个文件，但是依赖 form 的 enctype 属性

```
<form enctype="multipart/from-data">
<div>
<p>上传文件</p>
<input type="file" name="fname" />
</div>
<input type="submit" value="提交" />
</form>
```

### 重置表单按钮

- 这个按钮可以重置表单内的内容

```
<form action="http://baidu.com" method="POST">
<input name="user" type="text" value="default" />
<input name="pwd" type="password" />
<input type="button" value="登陆" />
<input type="submit" value="提交" />
<input type="reset" value="重置" /> // 点击按钮后已经输入在输入框的内容将被重置
</form>
```

### 多行文本框

- 多行文本输入，这个标签不是自闭合

```
<form action="http://baidu.com" method="POST">
<textarea name="wenben">多行文本默认内容</textarea> // 多行文本默认值放在标签内
<input type="submit" value="提交" />
</form>
```

### 选择框

- 单选下拉选择框，如果需要省定位到市，需要联动，则需要js

```
<form action="http://baidu.com" method="POST">
<p>
<select name="xuanze"> // name 将被提交到后台
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<option value="4" selected="selected">成都</option> // selected 表示默认选中
</select>
</p>
<input type="submit" value="提交" />
</form>
```

- 平铺的复选选择框，size 指定一个平铺的选择框大小，multiple 表示可以在平铺的选择框内进行复选

```
<form action="http://baidu.com" method="POST">
<p>
<select name="xuanze" size="10" multiple="multiple"> // 表示可以多选
<option value="1">苏州</option>
<option value="2">上海</option>
<option value="3">杭州</option>
<option value="4" selected="selected">广州</option> // selected 表示默认选中
</select>
</p>
<input type="submit" value="提交" />
</form>
```

- 选择框内，对内容进行分组

```
<form action="http://baidu.com" method="POST">
<p>
<select name="xuanze">
<optgroup label="山西省">
<option value="1">太原</option>
<option value="2">运城</option>
<option value="3">临汾</option>
<option value="4" selected="selected">大同</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">邯郸</option>
<option value="6">涉县</option>
</optgroup>
</select>
</p>
<input type="submit" value="提交" />
</form>
```

### 超链接

- `<a>` 超级链接，属于行内标签，不换行

```
<a href="www.baidu.com" target="_blank">百度</aa>
```

- `<a>` 标签当锚点，必须以 # 号开头

```
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height:600px;">第一章内容</div>
<div id="i2" style="height:600px;">第二章内容</div>
<div id="i3" style="height:600px;">第三章内容</div>
```

- 图片插入，alt 是图片加载失败时候的文字，title 是鼠标移到图片时候显示的文字

```
<a href="http://baidu.com">
<img src="2018.jpg" style="height:640px; width:320;" alt="美女" title="大美妞"></img>
</a>
```

### 文字列表

- 无序列表 `<ul>`

```
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
```

- 有序列表 `<ol>`

```
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
```

- 分段标题列表 `<dl>`

```
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
```

### 表格

- 表格，border 指的是为表格加上边框，`<tr>` 表格的一行，`<td>` 表格的一列。

```
<table border="1"> <!--表格标签-->
<thead> <!--表头标签-->
<tr> <!--表头一行-->
<th>主机</th> <!--表头一列-->
<th>端口</th>
<th>详情</th>
</tr>
</thead>
<tbody> <!--表体标签-->
<tr> <!--表体一行-->
<td>10.0.0.1</td> <!--表体一列-->
<td>8080</td>
<td>
<a href="baidu.com">查看</a>
<a href="baidu.com">修改</a>
</td>
</tr>
<tr>
<td>10.0.0.2</td>
<td>9527</td>
<td>
<a href="baidu.com">查看</a>
<a href="baidu.com">修改</a>
</td>
</tr>
<tbody>
</table>
```

- 表格之合并单元格

```
<table border="1">
<thead>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
<th>表头第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">第一行第一列</td> <!--合并两行-->
<td colspan="2">第一行第二列占两个</td> <!--合并两列-->
<td>第一行第四列</td>
</tr>
<tr>
<td colspan="2">第二行第二列占两个</td>
<td>第二行第四列</td>
</tr>
<tbody>
</table>
```

### 文本光标获取

- 文字关联输入框，`<label>` `for` 可以关联到`<input>`，效果是：点击输入框或 `label` 都能获取到光标

```
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
```

### 字段集公示板

- 字段集，一个边框，可以带标题带标题

```
<fieldset>
<legend>登陆</legend>
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<br />
<label for="username">密码：</label>
<input id="username" type="text" name="user" />
</fieldset>
```

## 上述代码区

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杨金恒的</title>
</head>
<body>
<div id='i1'>欢迎杨金恒来观光指导</div>
<script>
function func(){
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func();',500);
</script>
<a href="http://www.baidu.com"> 杨金&lt;a&gt;恒 </a>
<p>杨金恒的个人网站<br />这里记录了我的生活</p>
<p>这是另外一个段落</p>
<p>这是又有一个段落<span>这是一个空白标签</span></p>
<form>
<input type="text" value="default"/>
<input type="password" />

<input type="button" value="登陆" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="M"/>
女：<input type="radio" name="gender" value="F"/>

<p>爱好</p>
篮球：<input type="checkbox" name="aihao" value="1"/>
足球：<input type="checkbox" name="aihao" value="2"/>
网球：<input type="checkbox" name="aihao" value="3"/>
台球：<input type="checkbox" name="aihao" value="4"/>

<p>上传文件</p>
<input type="file">

</div>
<textarea name="wenben">多行文本默认内容</textarea>

<p>
<select name="xuanze">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<option value="4" selected="selected">成都</option>
</select>
</p>

<p>
<select name="xuanze" size="10" multiple="multiple">
<option value="1">苏州</option>
<option value="2">上海</option>
<option value="3">杭州</option>
<option value="4" selected="selected">广州</option>
</select>
</p>

<p>
<select name="xuanze">
<optgroup label="山西省">
<option value="1">太原</option>
<option value="2">运城</option>
<option value="3">临汾</option>
<option value="4" selected="selected">大同</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">邯郸</option>
<option value="6">涉县</option>
</optgroup>
</select>
</p>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<!-- <a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height:600px;">第一章内容</div>
<div id="i2" style="height:600px;">第二章内容</div>
<div id="i3" style="height:600px;">第三章内容</div> -->
<p>
<a href="http://baidu.com">
<img src="meinv.jpg" style="height:320px; width:640;" alt="这是个位置是个大美妞" title="哈哈看到大美妞了吧"></img>
</a>
</a>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
<dl>
<dt>内容1</dt>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>内容1</dt>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<table border="1">
<thead>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
<th>表头第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">第一行第一列</td>
<td colspan="2">第一行第二列占两个</td>
<td>第一行第四列</td>
</tr>
<tr>
<td colspan="2">第一行第二列占两个</td>
<td>第二行第四列</td>
</tr>
<tbody>
</table>
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<fieldset>
<legend>登陆</legend>
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<br />
<label for="username">密码：</label>
<input id="username" type="text" name="user" />
</fieldset>
</form>
</body>
</html>
```

posted @ 2018-11-13 10:26  Python爱好者666  阅读(156)  评论(0)  编辑  收藏  举报