html基础，常用标签，列表，超链接，图片，表格，表单

一:html基础

1. 网页的组成：

1：网页的结构：图片、文字、线条、超链接、视频

2：网页的变现：给网页穿一层外衣:美观、漂亮

3：网页的行为：

总结：网页的构成：结构、表现、行为

2. WEB标准：制作网页的标准，web标准是一个集合体，一系列标准集合

WEB标准:

	网页的结构   ->    HTML语言     【 W3C 】

	网页的表现   ->    CSS语言      【 W3C 】

	网页的行为   ->    JavaScript  [ js ]  【ECMA】

补充：web标准由W3C(万维网联盟) 和  ECMA(欧洲电脑网商联合会)组织颁发

3. HTML语言：

HTML汉译：超文本标记语言

XHTML汉译：可扩展的超文本标记语言（版本升级的遗留 ）  【语法更加严格】

HTML5 : 第5次重大修改

4. 站点的创建：（整合网站资源）

1：在本地创建一个文件夹即可

2：文件夹命名：
    a:小写英文字母、数字、下划线的组合
    b:不得包含汉字、空格等特殊字符
    c:英文字母开头

5. html语言的注释：注释（浏览器不加载、提示信息）

<!--      注释的内容    -->	

6. 扩展：前端环境

1：dev环境：开发环境：外部用户是无法访问，里面的版本跟新变动较大。
2：pro环境：生产环境：面向用户，连接上网络，用户可以正常访问。
3：test环境：测试环境：外部用户无法访问，对内开发，版本比较稳定。

前端工程化搭建环境：
-| site
	- | src
		-| html
		-| css
		-| js
			-| js
			-| lib
			-| plug
	- | dist

二:html语法分析

1.html语言的组成:

    a： 标签（标记、元素）
        说明：长在尖角号后面第一个单词称作标签

    b:  html属性
        说明：
            1>长在标签后面，用空格隔开的就是属性
            2>属性和属性值用等号连接，并且属性值放在引号里面

2. 总结html语法规范：

 html标签分为两类：常规标记（双标记）、空标记（单标记）
    双标记：
        <标签 属性="属性值" 属性="属性值">   </标签>

    单标记：
        <标签 属性="属性值" 属性="属性值">

一:常用标签

1. 文本标题标签：

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

    特点：
        a：每个标签都有属于自己默认样式（文字大小、文本加粗...）
        b：h1是有唯一性的。在一个页面内只能出现一次。做网页的logo
        c：h1 - h6 禁止互相嵌套

2.字体加粗：

	<b></b>    ->   H5里面不被推荐使用
 	<strong></strong>   表示着重音

3. 字体的倾斜：

	<i></i>
	<em></em>   表示着重音

4. 下划线标签

	<u></u>

5. 强制换行符

	<br>
    说明：浏览器只要遇到br，把后面的内容放在下一行显示。

6. 水平线

	<hr>
   （不常用：后期线条都是用css边框实现）

7. 上标与下标

	<sup></sup>
    <sub></sub>

8. 字符标签

	<span></span>
    表示一个字符或者是一小段文本

**9.段落标签： **

	<p></p>
    注：p标签里面不能嵌套h1 - h6	

10. 常用的转义字符

	不换行的空格     
    左右尖角号      >    <
    网站的备案图标  ©

11. div

	划分网页区域：
    每一个div就是一个版块

二:列表

1. 无序列表

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    注：
        1：所有的列表符号都需要清除
        2：应用： 新闻条、网页主导航条

2. 有序列表

    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

    注：
        列表符号可以通过type属性更改：属性值  a  A   i  I
        制定开始的序号  start  属性值必须是数字，表示从第几个开始

3. 自定义列表

    <dl>
        <dt>名词</dt>
        <dd>对名词的解释</dd>
    </dl>

三:超链接

<a></a>
    属性：
        href=""  跳转目标地址
        target=""   是否弹出新窗口打开连接
            属性值：_blank    _self (默认值)

        title=""  提示信息 （大部标签都能支持title属性）


空连接：
    <a href="#">空连接</a>

如果用a模拟按钮的时候，a是可以绑定一些其他的功能
    <a href="javascript:void(0);"></a>



默认样式：字体是蓝色、点击的时候是红色、点击过后是紫色、下划线

拓展：

    a里面属性     rel="nofollow"
    自己的网站有其他网站的连接，可以再其他网址a上面 添加rel="nofollow"防止权重外流。
    举例说明：如果A网页上有一个链接指向B网页，但A网页给这个链接加上了rel=”nofollow” 标注，则搜索引擎不把A网页计算入B网页的反向链接

    网站排名的PR值：
        a 跳转 到 B ，a给b投了一票。

四:图片

1. 网页中图片的展示形式：

    1：导入的图片  html
    2：背景图      css

2.图片的导入

    <img>
        html属性：
            src="路径"   图片的路径
            width=""     图片的宽
            height=""    图片的高
            border=" "   图片的边框
            alt=""
            title=""

alt属性的作用：

    1：当图片加载不出来用alt里面的文本替换图片
    2：alt里面的文本小于100个字符
    3：alt属性是img标签里面必须的属性，如果没有文本空着即可
    4：搜索引擎是检索不到图片上面的文字，alt就是做优化。

title属性作用：
    1：title属性不是必须的
    2：增加用户体验，鼠标放在图片上面有提示信息。

相对路径的写法：

    同级文件找同级文件

                ./目标文件.后缀
    
    父级文件找子级文件

                ./进入文件夹的名称/目标.后缀

    子级文件找父级文件

                ../目标.后缀

五:表格

1.表格：

表格的作用：显示数据

table是表格    tr行    td列

<table>
    <tr>
        <td></td>
    </tr>
</table>

2.table表格里面的html属性：

        width
        height
        border
        bordercolor   边框颜色
        bgcolor    背景颜色

        cellspacing=""  单元格与单元格之间的间距
        cellpadding=""  单元格和内容之间的间距

        align=""   水平对齐方式
                属性值：left  right   center

        valign=""  垂直对齐方式
                属性值： top   bottom  middle

六:表单

1. 表单

作用：收录用户信息
每一个表单是form
    属性：
        action=""  接口地址
        name=""    表单的名称
        method="get/post"  数据提交方式

2.表单元素：

    文本框(输入框)   <input type="text">
    密码框          <input type="password">
    提交按钮        <input type="submit">
    重置按钮        <input type="reset">
    空按钮          <input type="button">
    单选按钮        <input type="radio">  注：每一组单选按钮，*name属性保持一致*
    多选按钮        <input type="checkbox">
    上传文件框      <input type="file">
    下拉菜单        <select>
                        <option></option>
                        <option selected></option>
                        <option></option>
                    </select>

    多行文本域       <textarea></textarea>
                    cols="30" rows="10"   字符为单位的宽高
                    禁止用户拖拽框的大小  resize:none;  css属性

3. input里面的属性:

    type属性：决定了input在页面中的显示状态
    value属性：根据input显示状态的不同，作用也是不一样的、input的值
    maxlength属性： 内容的最大长度
    name属性：  当前表单元素的名称
    size属性：  字符为单位控制input的大小    

4.单选、多选按钮的属性：

	默认选中    checked="checked"
    禁止选中    disabled="disabled"