HTML基础知识

1，HTML

注释：

标签分为：

自闭合标签：</>，建议自闭合标签都加"/"，直接就可以知道是自闭合，br，input，image

主动闭合标签：<></>

标签分为：

块级标签（不管自己内容，都占一行），div，h，p

行内标签（也称内联标签，不会占一行），span，input, a

标签属性：

<html lang='en'> : lang属性

2，HEAD内的标签

1）title标签：HEAD内只有title标签可以看到

2）meta标签：编码、刷新、自动跳转、关键词、网站描述、兼容模式

3）link标签：设置页面图标，stylecss

4）style标签：CSS

5）script标签：javascript，<script>JS代码</script>

3，BODY内的标签

1）各种符号：&nbsp空格，&gt大于号，&lt小于号等，不用记，网上搜索

效果：产生符号

2）p标签：段落标签

使用：<p>xxxxxxxxxxxx</p>

效果：间距+换行

3）br标签：换行标签

使用：<p>xxxxxx<br>xxxxxx</p>，直接在文字中间加<br>

效果：换行

4）h标签：标题标签

使用：<h1>xxxxxx</h1>

效果：h1~h6，依次从大到小，块级标签

6）div标签：块级标签，使用率最高的标签，学前端学div+css

使用：<div>xxxxxx</div>

效果：白板，不带任何特性

7）span标签：行内标签

使用：<span>xxxxxx</span><span>xxxxxx</span>

效果：白板，不带任何特性，行内标签多个span标签内的文字会呈现在一行内

8）input标签：能够向后台提交的标签，自闭合，行内，最重要必须要全部会

标签属性：

type：标签类型

name：POST提交到后台时，后台要通过name获取输入的值，相当于字典的key；对于radio和checkbox，name是选择框名，对于radio还有互斥作用

value：对于text，password，value是默认值；对于button，submit，value是按钮中的值；对于radio和checkbox，value是选中的值

使用：

<input type='text' name='user' value="默认值"/> # 文本输入框，value设置默认值

<input type='password' name='pwd' /> # 密码输入框

<input type='button' value='登录'/> # 按钮，可以用于ajax提交

<input type='submit' value='提交'/> # 按钮，POST提交时必须用submit

<input type='radio' name='gender' value='male' checked="checked"/> # 单选框，checked默认选中，name相同则互斥，value是选中的值

<input type='checkbox' name="hobby" value="football" checked="checked"/> # 复选框，checked默认选中，name复选框名，value是选中的值

<input type='file' name="f_name"/> # 上传文件，name是上传文件名

<input type='reset' value="重置"/> # 重置，还原所有input值

效果：结合form标签向后台提交数据

9）textarea标签：能够向后台提交的标签，文本输入标签，主动闭合

使用：<textarea name='blocktxt'>默认值</textarea> # 后台根据name取内容，默认值放在中间即可

效果：结合form标签向后台提交多行文本

10）select标签：能够向后台提交的标签，下拉选择标签

标签属性：

name：select名称

size：上下高度

multiple：多选

option-value：选中的值

optgroup：分组显示，分了个组，本身不能被选中

使用：

<select name='city' size="4" multiple="multiple"> # 后台根据name=city取值，size选择框高度(默认=1)，multiple是多选

<option value='3' selected="selected">成都</option> # value是city的值，selected是默认选择项

</select>

效果：结合form标签向后台提交选择结果

多级选择联动：需要配合js

11）form标签：能够向后台提交的标签，最重要必须要全部会

标签属性：

action：提交到哪里去

method：GET拼接到url地址后发过去，POST在body里发过去，抓包都能抓到，默认GET提交

enctype：enctype="multipart/form-data"，input标签有上传文件时要加这个属性，表示把上传的文件一点点发给服务器

使用:

<input…/>

</form>

效果：

配合input，textarea，select，用于提交表单

样例：

搜索是以get请求的，以百度为例，get请求为：https://www.baidu.com/s?wd=guxh，于是自己做个跳转的方法：

</form>

12）a标签：跳转，行内标签

标签属性：

href：跳转页面

target = _blank：跳转时新打开页面

使用：

跳转页面：<a href="http://www.baidu.com" target = _blank> 百度 </a>

做锚：<a href="#id1"> 第一章</a>

<div id='id1'> 第一章内容 </div>

效果：1）跳转，2）做锚

13）img标签：

属性：

src：图片位置

alt：图片获取不到后显示的名称

title：鼠标放上去时显示的名称

使用：

<img src="图片位置" alt="本图片名称" title="本图片名称"> # 放置图片

<a ref='http://www.baidu.com'> <img src="图片位置"> </a> # 放置图片并且点击图片后跳转

效果：呈现图片

14）列表：一般不用，都是通过CSS改造成自己想要的结果

使用：

<ul>

</ul>

有如下配对关系：ul（li）、ol（li）、dl（dt标题，dd内容）

15）表格：

标签属性：

border：边框

colspan：横跨多少列

rowspan：竖跨多少行

使用：

table表，thead表头，tbody表内容，tr行，th列，td列

<table border='1'> # 设置边框宽度为1

<thead>

　　<tr>

　　　　<th>第一列列名</th>

　　　　<th>第二列列名</th>

　　　　<th>第三列列名</th>

　　</tr>

</thead>

<tbody>

　　<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

<td >第一行第三列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td colspan='2'>第二行第二列和第三列</td>

</tr>

</tbody>

</table>

16）label标签

标签属性：

for：与input的id创建管理，点击lable后也能在input输入框内进行编辑输入

使用：只写内容是普通文本，一般结合input，创建关联，在input时显示用户名，输入时可编辑

用于：点击文字，获取关联的标签光标

4，用于选择或者值的标签属性

1）id = "i1"

html里，id不能重复，name可以重复

DOM获取：document.getElementById('i1')，获取内容.innerText

jquery获取：$('#i1')

2）class

可以用于jqeury选择，获取class='abc'，$('.abc')

3）name和value

name：POST时传key

value：POST时传value

5，调试

Chrome审查元素，放大镜选中后，可以看到标签

pycharm中，code》reformat code，可以自动帮代码缩进做好