HTML-1.基础

HTML

（Htyper Text Markup Language）超文本标记语言

超文本：就是指页面可以包含图片，连接，音乐，程序等非文字元素

标记语言：标记(标签)构成语言，凡是用<>标记的都是标签语言

网页就是HTML文档，由游览器解析，用来展示的

静态页面：静态资源，用xxx.html

动态页面：html代码由某种开发语言根据用户请求动态生成

HTML文档结构：

根元素html—>html元素—>{meta元素，title元素}

根元素html—>body元素—>{div元素}

HTML基本语法结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

注意:

<!DOCTYPE html>标签表示标准模式渲染,W3C标准

渲染模式有两种：BackCompat，CSS1Compat。

BackCompat：怪异模式，游览器使用自身怪异模式解析渲染

CSS1Compat：标准模式，游览器使用W3C标准解析渲染页面

如果页面没有DOCTYPE声明，那么compatMode默认就是BackCompat

在html使用<script>alert(window.top.document.compatMode)</script>来查看当前游览器渲染模式

HTML标签

表示标签，通常标签不区分大小写。

标签分为两部分（开始标签和结束标签），两个标签之间的部分叫标签体。

有些标签功能简单，使用一个标签就可以，叫自闭合标签。如<br/> <hr/> <input/> <img/>。

标签可以嵌套，但不能交叉嵌套。如<a><b></a></b>这样是错误的，<a><b></b></a>这样才正确。

HTML属性

通常是键值对形式出现，如name=’zhuxy’

属性只能出现在开始标签，或自闭合标签中

属性名字全部小写，”属性值” 必须使用双引号或单引号如：name=”zhuxy”，name=’server’

如果属性值和属性名一样，直接写属性名就可以。如：readonly=readonly ===> readonly

属性通常有自定义属性，和内在属性

基本标签

`<head>`标签

通常这个标签只是解释性标签，不做显示用。

`<meta>`标签

<meta>标签组成有两个属性分别是name属性和http-equiv属性

name属性：主要用于描述页面与之对应的属性为content，content内容主要便于搜索引擎机器人查找信息和分类信息用

例子：

<meta name='keywords' content='meta总结，html meta，meta属性，meta跳转'>

主要是用于搜索后出来的描述信息

http-equiv属性：相当于http文件头作用，它像游览器传回一些有用信息，以帮助正确和精确显示网页内容，属性值也是content

例子：

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

刷新属性，2秒后刷新到百度，如果没有URL表示2秒刷新

例子:

<meta http-equiv="content-Type" charset="UTF8">可以简写成<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

如果想适应IE7 就可以兼容IE7

`<title>`标签

用于游览器显示的标题。

例子：

1
2
3

<link rel="icon" href="http://www.zhuxyid.com/favicon.ico">        #引入图标
<link rel="stylesheet" href="css.css">         #引入css
<script src="hello.js"></script>               #引入js

`<body>`标签

显示正文信息，在body里面定义的都可以在页面上显示。

其他标签

<hN>			#h1~h6 表示标题
<b><strong>		#加粗标签
<strike>		#删除线
<em>			#斜体,或者<i>
<sup><sub>		#上角标，下角标
<br>			#换行，通常就一个标签
<p>				#段落差，包裹的内容被换行,并且上下内容之间也有空白
<hr>			#水平线
<tt>			#打印字体标记
<cite>			#引用方式标记，也是斜体
<big>			#大型字体
<u>				#下划线标记

特殊字符

&nbsp;       空格
&lt;         小于 <
&gt;         大于 >
&amp;        和号 &
&quot;       引号“
&apos;       (ie不支持)撇‘
&cent;       分¢
&pound;      磅£
&yen;        日元￥
&euro;       欧元€
&sect;       小节§
&copy;       版权©
&reg;        注册商标®
&trade;      商标™
&times;      乘
&divide;     除

标签种类

块级标签（block）

块级标签独占一行，如：

<p> <h1> <table> <ol> <ul> <form> <div>

块级标签特点：

总是在新行上开始

宽带默认是他容器的100%,除非设定一个高度

可容纳内联元素和其他块元素

块可以嵌套内联和块标签

内联标签（inline）

内联标签不占，如：

<a> <input> <img> <sub> <sup> <textarea> <span>

内联标签特点

inline(内联)元素特点

和其他元素都在一行上

宽度就是他的文字或图片的高度，不可改变

内联元素只能容纳文本或者其他内联元素

内联可以嵌套内联

常见标签

`<img>`标签

通常设置图片信息，如宽度，大小，来源等信息

属性如下：

> src        #图片路径
> width      #图片宽度	单位:px像素 %百分比(根据游览器)
> height     #图片高度	单位同上
> alt        #没有加载成功提示
> title      #鼠标悬浮时提示
>

示例：

1 2	> <img src="../file/grafana.png" alt="grafana" title="grafana1111" width="100%" height="100%"> >

`<a>`标签

通常文字的信息，如连接，跳转方式等

属性如下

> href			#要链接的资源路径
> target="_self"	#当前游览器打开被链接文档
> name			#定义页面书签
> id			#表示每个标识的id，不能一样,每个标签都可以添加id
> id通常用于跳转 href="#id" 锚
> 
> #target其他方式跳转，默认是_self，
> #	_self	在相同的游览器打开被链接文档
> #	_blank	在新窗口打开被链接文档
> #	_parent	在父游览器集中打开被连接文档
> #	_top	在整个窗口打开被连接文档
>

示例：

1 2	> <a href="http://www.zhuxyid.com" target="_blank" name="zhuxyid" >跳转zhuxyid.com</a> >

定义锚点：

> <a id="head" href="#tail">返回底部</a>
> <img src="../file/grafana.png" height="100000px">
> <a id="tail" href="#head">返回顶部</a>
>

可以嵌套，比如点击图片跳转响应页:

> <a href="http://www.zhuxyid.com" target="_blank" name="zhuxyid">
>     <img src="../file/grafana.png" alt="截图" title="grafana1111" width="100%" height="100%">
> </a>
>

列表标签

`<ul>`无序列表

<ul> (unordered list)无序列表格式:
1
2
3
4
5
6
><ul>
>	<li>标签1</li>
>	<li>标签2</li>
>	<li>标签3</li>
></ul>
>

`<ol>`有序列表

<ol> (order list)有序列表格式

> <ol>
>     <li>标签1</li>
>     <li>标签2</li>
>     <li>标签3</li>
> </ol>
>

有序列表显示类型如下：

<ol type=[1|A|a|I|i]>

1 阿拉伯数字1, 2, 3等，默认type

A 大写字母A，B，C

a 小写字母a，b，c

I 大写罗马数字Ⅰ，Ⅱ，Ⅲ，Ⅳ，Ⅴ

i 小写罗马数字i，ii，iii ，iv，v

列表嵌套

无序列表可以嵌套有序，有序也可以嵌套无序

<ul>
    <li>linux运维</li>
        <ol type="1">
            <li>nginx</li>
                <ol type="a">
                    <li>安装nginx</li>
                    <li>配置nginx</li>
                </ol>
            <li>apache</li>
        </ol>
    <li>python开发</li>
        <ol type="1">
            <li>python语法</li>
                <ol type="a">
                    <li>python类型</li>
                    <li>python函数</li>
                </ol>
            <li>python面向对象</li>
        </ol>
</ul>

定义型列表

通常用对列表条目进行简短说明。

格式：

> <dl>
> 	<dt></dt>
> 		<dd></dd>
> 		<dd></dd>
> 	<dt></dt>
> </dl>
> 
> #实例
> <dl>
> 	<dt>软件说明：</dt>
> 		<dd>简单介绍软件功能1</dd>
> 		<dd>简单介绍软件功能2</dd>
> 	<dt>软件界面：</dt>
> 		<dd>用于选择软件外观</dd>
> 	</dl>
>

表单标签

`<from>`标签

表单标签，通常用于接受不同类型的用户输入，用户提交表单时想服务器传输数据，从而实现用户与web服务器的交互，表单标签，要提交的所有内容都应该在该标签中

表单能够包含<input>元素，比如文本字段，复选框，单选框，提交按钮等

表单还可以包含<textarea> <select> <fieldset> 和 <label>元素

<from>属性

> action     表单提交到哪，一般指向服务端一个程序，程序接受表单提交过来的数据(即表单元素值)，做响应处理
> method     表单提交方式POST/GET  默认取值就是GET
> enctype    上传文件
> 	#enctype="multipart/form-data"  #分段上传
> 
> #method方式特点:
> GET特点:	提交键值后放在url后面,安全性差。对提交内容有长度限制1024
> POST特点:	提交键值后不放在url后,安全性高。对提交内容长度不限制ls
>

`<input>`标签

表单输入，用户输入类型有文本，密码，多选，单选，上传，提交等

<input>属性

> type		#输入类型
> name		#定义标签名称
> value		#定义标签值(有name就有value，传入后端)
> placeholder	#占位符，显示输入点击的内容，默认鼠标点击该标签是空白
> readonly	#表示只读,这里是缩写形式,可以写成readonly='readonly'
> checked		#表示默认选择,这里也是缩写形式,checked=‘checked’
> disabled	#表示禁用，类似readonly,这样也是缩写形式
> 
> #type类型如下：
> type = "text"		#普通文本
> type = "password"	#密码文件,输入都是以.表示
> type = "checkbox"	#多选
> type = "radio"		#单选
> type = "botton"		#只是一个点击按钮，通常用作绑定一个事件
> type = "reset"		#重置
> type = "submit"		#提交，默认显示submit按钮，如果添加了value那就显示对应的value。
> type = "file"		#上传文件，需要在from标签添加enctype属性，必须是post不能get形式
> 
> #在django中处理文件代码如下:
> for item in request.FILES:
> 	fileObj = request.Files.get(item)
> 	f = open(fileObj.name,'wb')
> 	iter_file = fileObj.chunks()
> 	for i in iter_file:
> 		r.write(line)
> 	f.close()
>

`<select>`标签

下拉框选择器，可以单选可以多选

<select>属性

1
2
3

name		    #指定name，后端接受,默认是单选
multiple='multiple'	#多选
size		    #多选情况下显示多少个

`<optgroup>`标签

定义在<select>内部

属性有：
1
2
> label		#定义一个名称
>

`<option>`标签

定义在<select>内部，<select>下拉的内容

属性有：
1
2
3
> value		指定值
> select		默认选中，这里是缩写，select="select"
>

`<textarea>`标签

定义一个文本域

属性有:

> name	表单提交的键
> cols	文本域默认多少列
> rows	文本域默认多少行
>

其他标签

`<label>` 标签

带有两个输入字段和相关标记的简单html表单。

通常<label>标签为<input>元素定义标注，<label>元素不会想用户呈现效果，如果您在 label 元素内点击文本，就会触发此控件，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，<label>标签的 for 属性应当与相关元素的 id 属性相同。

1 2	<label for='www'>name</label> <input id='www' type='text>

`<fieldset>`标签

一个简单的特性用的不多

<fieldset>
	<legend></legend>
	<input type="text">
</fieldset>

表单示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="http://127.0.0.1:8888/index/" method="POST">
<p>注册页面</p>
<p>用户名：<input type="text" name="username"></p>
<p>出生日期：<input type="date" name="birthday"></p>
<p>密码：  <input type="password" name="password"></p>
<p>爱好：<input type="checkbox" name="xh" value="yy">音乐 <input type="checkbox" name="xh" value="dy">电影 <input type="checkbox" name="xh" value="sf">书法 <input type="checkbox" name="xh" value="ys">艺术</p>
<p>性别：<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女</p>
<p>年纪:<input type="text" name="age" value="20"> </p>
<p>上传文件:<input type="file" name="put_file"></p>
<p>
    省份：
    <select name="province">
        <option value="heib" select>江苏</option>
        <option value="jiangs" select>安徽</option>
        <option value="hein">河南</option>
        <option value="zhej">浙江</option>
    </select>
    城市:
    <select name="city" size="10">
        <option value="nj" select>南京</option>
        <option value="ha">淮安</option>
        <option value="cz">常州</option>
        <option value="sz">苏州</option>
    </select>
    区级:
    <select name="zone">
        <option value="jn">江宁</option>
        <option value="qh">秦淮</option>
        <option value="xw">玄武</option>
        <option value="bx">白下</option>
    </select>
    省份：
    <select name="">
        <optgroup label="江苏">
            <option value="">南京</option>
            <option value="">淮安</option>
            <option value="">无锡</option>
            <option value="">苏州</option>
        <optgroup>
    </select>
</p>
<p>简介:</p>
    <p><textarea name="jj" cols="50" rows="10"></textarea></p>
    <label for="www">姓名</label>
    <input id="www" type="text">


<p><input type="button" value="注册"></p>
<p><input type="reset"></p>

</p>
<p><input type="button" value="注册"></p>
<p><input type="reset"></p>

    <!--/?username=assss&password=ssss&xh=dy&xh=sf&gender=0-->
    <!--后端接受的内容-->
</form>
</body>
</html>

表格标签

`<table>`标签

通常定义一个表格。

<table>属性

>border		表格边距
>cellpadding	表格内边距
>cellspacing	表格外边距
>width		表格宽度，默认单位为像素,width="100%"可以为百分比
>

`<thead>`标签

通常定义表格头信息

<thead>属性

<tr>		表格行
rowspan="2"	占几行
colspan="2"	占几列
<th>		加粗

`<tbody>`标签

定义表格内容

<tbody>属性

1 2	<tr> 表格行 <td> 普通元素

表格示例

<table border="1px" cellpadding="5px" cellspacing="5px">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">0001</td>
            <td colspan="2">zhuxuyue</td>
            <!--<td>18</td>-->
        </tr>
        <tr>
            <!--<td>0002</td>-->
            <td>ykw</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

-----------------------简写--------------------
<table border="1px" cellpadding="5px" cellspacing="5px">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
            <td rowspan="2">0001</td>
            <td colspan="2">zhuxuyue</td>
            <!--<td>18</td>-->
        </tr>
        <tr>
            <!--<td>0002</td>-->
            <td>ykw</td>
            <td>18</td>
        </tr>
</table>

HTML

HTML基本语法结构

HTML标签

HTML属性

基本标签

<head>标签

<meta>标签

<title>标签

<body>标签

其他标签

特殊字符

标签种类

块级标签（block）

内联标签（inline）

常见标签

<img>标签

<a>标签

列表标签

<ul>无序列表

<ol>有序列表

列表嵌套

定义型列表

表单标签

<from>标签

<input>标签

<select>标签

<optgroup>标签

<option>标签

<textarea>标签

其他标签

<label> 标签

<fieldset>标签

表单示例

表格标签

<table>标签

<thead>标签

<tbody>标签

表格示例

`<head>`标签

`<meta>`标签

`<title>`标签

`<body>`标签

`<img>`标签

`<a>`标签

`<ul>`无序列表

`<ol>`有序列表

`<from>`标签

`<input>`标签

`<select>`标签

`<optgroup>`标签

`<option>`标签

`<textarea>`标签

`<label>` 标签

`<fieldset>`标签

`<table>`标签

`<thead>`标签

`<tbody>`标签