web介绍
HTML基本介绍
超文本标记语言（HyperText markup language），其中的超指的是它能表达的内容不仅仅只是文字，还可以是图片，声音，视频等。
网页骨架
DOCTYPE----document type----文档类型
<！DOCTYPE html>通过这句话让浏览器明白，将来按照html的语法来理解将来的内容。（即当前文档类型是html）
<html>：这就是网页中最大的一个标签，称之为根标签
head 它是属于html的“儿子”我们称之为网页的头。在它里面我们会放置一些有用的信息，这些信息是专门给浏览器看的。
head 里面默认有两个“儿子”，一个叫meta 它里面如果设置了charset就表示就表示用来和浏览器申明当前文档的编码。一个叫title，它里面的文字显示哎浏览器的标签页上，称之为网页标题。
body：网页主体，它里面的内容会显示在浏览器的空白区域内。
语法和标签
标签就是HTML中的“单词”，相当于汉语中的字
语法就是用来定义这些字如何去解析或者书写的规则
将HTML中的标签分为单标签和双标签两种
双标签：<标签名称></标签名称>（在英文输入法下输入）
单标签：<标签名 />
常见的标签
标题标签：有6种：h1-h6，都是双标签，档次递减。
<h1>标题内容</h1>，在一个网页当中，只允许出现一个h1。
段落标签：<p>段落内容</p>
ctrl+？给选中内容加注释快捷键，再按一次取消
<br />换行标签，单标签
 ；：在内容中间添加空格
在HTML标签书写中允许标签出现嵌套书写，但是不允许交叉嵌套。
图片标签
<img />：这个标签的作用就是在网页当中插入图片
<img src="" /> 此时多出来的“东西”就是标签属性，标签属性与标签名之间用空格隔开，标签属性由名字和值两部分组成。属性名和属性值用单等号进行连接，属性值需要放在引号里，单引号双引号都可，数字可省略引号。一个标签可以有多个属性，属性之间用空格隔开。
src里面写的就是图片地址，width属性是图片宽度，height属性是图片高度，只写宽度或者高度其中一个属性时，另一个会随着图片原比例调整。title属性，鼠标悬停在图片上时会出现。
alt属性，当图片加载失败时，alt内的内容会显示出来。
链接标签
<a href=“”></a>双标签
默认情况下也有一个属性href，它的作用和img身上的src很像，它里面写的内容是目标网页的地址。
<a href=“http://www.baidu.com”>百度一下，您就知道</a>
空链接：在href的值为#时为空连接，空连接一般出现在开发阶段，因为很多页面的线上真实地址都还没有写出来，所以我们先使用空连接占位。
属性target：可以设置当前页面在哪个窗口打开，当target=“_blank”，可以设置当前页面在新窗口打开。
路径
所谓路径可以看作是在程序代码中用来查找某个具体的资源所“走”过的路。
绝对路径：一般是以盘符为起点进行查找，或者就是一个绝对的URL地址。
相对路径：就是相对某一个已知的文件为起点进行资源的查找。在实际工作中，相对路径使用的频率是最高的，一般分为三种：同级路径，下级路径，上级路径。
相对路径的用法（以查找图片为例，在一个HTML网页中插入一张HTML文件之外的图片，同时采用的是相对路径，所以这里的相对起点是HTML网页）：
同级路径：
同级指的就是HTML网页和目标图片在同级目录里，对于同级路径，只需要在src中写入图片的名称即可。
下级路径：
下级指的是图片在HTML文件的下级目录中。此时需要在目录后面使用一个/来向下进行穿透查找。
上级路径：
图片在HTML文件的上级目录，此时需要使用一个../来向上回退进行查找。
注：上述的路径的规则虽然以查找图片为例，但是总结的规律适用于其他类型的资源查找；
表单
表单（双标签）就是一种在互联网上用于收集用户信息的结构，在HTML中的标签为：
form(表单域)：<form action="" method='""></form>，默认情况下，form只是在申明当前结构是一个表单，但是他里面不存在任何供用户输入的框框，看起来就像是一张白纸。这个时候想要通过表单来收集用户的信息，就必须这张白纸上准备好一些可以供用户输入的框框。此时在HTML中将这些框称之为表单元素。
<form action="" method='"">
用户名:<input type="text" />
<br /><br />
<input type="submit" />
</form>
得到结果：
属性action里面的值就是将当前表单中的数据提交到哪里去，在生产阶段一般用#或空着。
属性method里面的值用来定义表单中的数据以何种形式提交到网站后台，最常见的是get post。
get：表示当前数据通过URL地址进行传输
<form action="#" method="get">
用户名:<input type="text" name="username" />
<br /><br />
密   码:<input type="password" name="mima"/>
<br /><br />
<input type="submit" />
</form>
输出结果：
get方式会将个人信息在url显示出来，所以存在安全隐患
而post方式并不会：
post方式就是指将数据写在HTTP请求的请求体当中。
常见的表单元素
单选框：
<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" checked="checked" /> 女
这里需要使用name值相同表示是一组。单选框只能选择其中一个选项。
checked属性代表默认选项，也可应用于多选框，可以省去属性值只写属性名。
多选框：
<input type="checkbox" /> 吃饭
<input type="checkbox" checked /> 测试
<input type="checkbox" /> 学习
文本域（双标签）：
<textarea name="名称" rows="行数" cols="列数">
</textarea>
下拉菜单：
<select name="">
<option value="">html</option>
<option value="">css</option>
<option value="">js</option>
<option value="">python</option>
</select>
写在标签对里面的内容是显示在界面上给用户看的，写在value内的值是给后台人员看的
value可以加在所有的表单元素身上，只不过有的表单元素不显示。一般起作用的value属性值常见于用户可以手动输入文本内容的表单元素。
重置按钮：
<input type="reset">
<br /><br />
普通按钮：
<input type="button" value="点击" />
<br /><br />
<input type="submit" value="点击提交数据" />
<br /><br />
表单元素注意细节：
1.name属性：form表单通过不同的表单元素来收集数据，有很多的表单元素名称都叫input，此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题，此时为了分辨那个数据属于哪个表单项。我们就认为的在input身上设置name属性。这样一来数据到达后端就会变成一下格式：username=“syy” pwd=“123” gender=“男”。。。。。。
2. value：作用是定义某些表单元素的默认显示内容（文本输入框，提交按钮，充值按钮，普通按钮）
3.checked：这是一个属性并且他的属性值就等于这个属性名，用来设置单选和多选框中的默认选项 。
4.selected：这也是一个属性名等于属性值的属性，添加在下拉选项身上实现某个选项被默认选中。
上面表单图如下：
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
