第十一章前端开发-html

1.1.0 html：超文本标记语言

html特征：（HyperText Markup Language）
- 对换行的空格不敏感
- 空白折叠
标签：有称为标记
- 双闭合标签 <a href=""></a>
- 单闭合标签 <br>

1.1.1 head标签

title标签：显示网站的标题
meta标签：提供有关界面的元信息 -字符编码
style标签：定义内部样式表
link标签：链接css资源文件、网站图标
script标签：链接脚本js文件

1.1.2 body标签

1.1.2.1 标题标签 h1-h6

1、h1-h6标题标签

2、eg: <h1>标题</h1>

1.1.2.2 段落标签 p

1、又称p标签，每个段落都要用p标签包裹

2、eg: <p>段落内容</p>

1.1.2.3 超链接标签 a

1.a标签

2.eg：<a href = "网址">内容</a>

3.a属性：

href：链接新网址，回到顶部（先定义id），跳转邮箱（mailto），下载文件
title:鼠标悬浮上的标题
style：行内样式
target：目标
- _self：默认值，在当前页面种打开新连接
- _blank：在新的空白也打开新的连接

4.如何清楚a标签的下划线？

text-decoration:none;   (td)

none:无线

underline:下划线

overline:上划线

line-through:删除线

1.1.2.4 图片标签 img

1.又称为img标签

2.eg：<img src = "" alt ="图片加载失败时的内容">

3.img属性：

src：图片的资源地址
alt：图片加载失败时显示的标题
title:鼠标悬浮时显示的标题
width:设置图片的宽度
height:设置图片的高度（设置一个，另外一个会自动按照原图的比例适应现在的高（宽）度）

1.1.2.5 字体标签

<b></b>：加粗
<i></i>、<em></em>:斜体
<u></u>下划线
<s></s>:删除线
<sup></sup>:上标
<sub></sub>：下标

1.1.2.6 列表标签 ul ol

1.无序列表: <ul>,无序列表中的每一项是<li>

ul （unordered list）
li：list item（列表项）
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
设置为无序号:list-style：none;

2.有序列表：<ol>,里面每一项是<l1>

ol:ordered list
ol标签的属性：type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
列表标识的起始编号
- 默认为1

1.1.2.7 表格标签 table

1.又称table标签

2.表格：<table>:

表头：<th>
行：<tr>
列:<td>

3.table属性：

border：边框
cellspacing：单元格和单元格之间的距离，外边距
bordercolor：表格的边框颜色

4.表格行和列的合并（th或者td的属性）

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

5.简单示例

<body>

    <div class="table">

        <table border="1" cellspacing="0">

            <!--表格头-->

            <thead>

                <!--表格行-->

                <tr>

                    <!--表格列，【注意】这里使用的是th-->

                    <th></th>

                    <th>星期一</th>

                    <th>星期二</th>

                    <th>星期三</th>

                    <th>星期四</th>

                    <th>星期五</th>

                </tr>

            </thead>

            <!--表格主体-->

            <tbody>

                <!--表格行-->

                <tr>

                    <td rowspan="3">上午</td>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td rowspan ="2">下午</td>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

            </tbody>

            <!--表格底部-->

            <tfoot>

                <tr>

                    <td colspan="6">课程表</td>

                </tr>

            </tfoot>

        </table>

    </div>

</body>

1.1.2.8 表单标签 form

1.又称form标签 <form>允许出现表单控件</form>

2.form属性：

action
- 定义表单被提交时发生的动作，提交给服务器处理程序的地址
method：
- 作用：定义表单提交数据的方式
- 取值：
  - get：默认值，明文提交，所提交的数据可以显示在地址上，安全性低，提交数据大小限制，最大2kb
  - post：密文提交，安全性高，不会显示到地址栏，无大小限制
enctype:表单数据的编码方式，只能在post方式下使用

3.表单控件分类

输入标签（文本框）：<input>
- type：控件的类型
  - button 按钮和提交按钮颜色不同
  - text：单行文本输入框
  - password：密码框
  - radio：单选框
    - 产生互斥效果：给每个单选框按钮设置相同的name属性
    - 默认选中，给按钮加checked属性=checked checked=true 为选中，false为不选中
  - checkbox：多选框
    - 默认选中：添加checked属性
  - placeholder：在单元格有提示字
    - <input type="text" placeholder="请输入用户名" id="username">
  - submit：提交按钮，负责将表中的表单控件提交到服务器
  - file：上传文件
  - datatime-local:时间
- value：控件的值，即要提交给服务器的数据
- name:控件的名称，提交到服务器用
- disabled：该属性只要出现在标签中，表示的是禁用该标签
lable标签：<lable>，可以设置和input有绑定关系
- 设置方式：input元素要有一个id属性，然后lable标签有一个for属性，和id值相同，就会想有绑定关系了
下拉列表标签:<select>，里面每一项用<option>表示
- select属性：
  - mutiple：设置多选
  - size=1，默认为1，如果大于1，列表为滚动视图
- option属性：
  - value 选项的值
  - selected预选中，不选默认是第一个选中
  - 下拉框实现单选
    
    html
    css
    javascript
    vue
```
    <h3>下拉框实现多选</h3>
```
    s
    html
    css
    javascript
    vue
多文本输入框:<textrea>
- textrea属性：
  - 作用：允许用户录入多行数据到表单控件中
  - 属性：
    - cols：指定文本的列数
    - rows：指定文本的行数

1.1.2.9 盒子标签 div 以及 span标签

div标签：<div>，division，分割
- 定义：把网页分割成不同的独立的逻辑区域，必须独占一行
- div属性：
  - align：设置区域的位置，可选left，right，center

span标签：<span>

定义：小区域标签，在不影响文本正常的情况下，单独设置对应的样式
span和div的唯一区别：span是不换行的，div是换行的

<style>

    span.active{

        font-weight:bold;

    }

</style>

<p>

    <span class='active'>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。

</p>

浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘

1.1.3.0 其他标签

1.换行标签 <br>

<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

2.分割线 <hr>

<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

3.特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。

所以HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰，仅此而已。

4.特殊字符

在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 --  。

常用的特殊字符：

http://tool.chinaz.com/Tools/HtmlChar.aspx

1.1.3 标签属性

HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。如

<div id="i1">这是一个div标签</div>

<p class='p1 p2 p3'>这是一个段落标签</p>

<a href="http://www.luffycity.com">这是一个链接</a>

<input type='button' onclick='addclick()'></input>

为什么能设置属性呢？

其实呢，你可以这样简单理解，因为最终我们这些标签会通过css去美化，通过javascript来操作，那么这些标签我们可以看成是一个对象，对象就应该有它自己的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法。后面会详细讲JavaScript和css，大家不用担心这里不好理解。

关于标签属性的注意事项：

1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。

2.属性值要用引号包裹起来，通常使用双引号也可以单引号。

3.属性和属性值不区分大小写，但是推荐使用小写。

1.1.4 标签的分类

块状元素：（块级标签）
- 特点
  - 独占一行
  - 可以设置框高，如果不设置宽，默认是父标签的100%宽度
  - 常见的：<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
行内元素：
- 特点：
  - 在一行内显示
  - 不可以设置宽高，如果不设置，默认是字体的大小
  - 常见：<a> <span> <br> <i> <em> <strong> <label>
行内块状元素：
- 在一行内显示
- 可以设置宽高
- 行内快标签属于行内标签
- 常见：img，input，td，button

4.属性

display：显示方式
- none：盒子隐藏
- block：转化为块
- inline：转化为行内
- inline-block：转化为行内块
- table-cell：转化为表格
text-align：文本排列方式
- left：水平靠左
- center：水平居中
- right：水平靠右
line-height：行高，一行的高度
- 当行高等于盒子模型的高度时，实现垂直居中
text-decoration：文本修饰
- none：无修饰
- underline：下划线
- overline：上划线
- line-through：删除线

1.1.5 标签嵌套规则

块级标签可以嵌套块级，行内，行内块标签
行内标签尽量不要嵌套块级
有几个特殊的块级标签只能包含内嵌标签，不能再包含块级标签，这几个特殊的标签是：
```
h1、h2、h3、h4、h5、h6、p
```
附加：

文本垂直和水平居中

让行高等于盒模型的高度实现垂直居中
使用text-align:center;实现文本水平居中

<style>

    div{

        width:200px;

        height: 60px;

        background-color: red;

        text-align:center;

        line-height: 60px;

    }

</style>

<div>

 	wusir

</div>

块级元素的水平和垂直居中
- 水平居中：left设置50%，margin-left设置当前盒子宽度的一半，并且值为负
- 垂直居中：top设置50%，margin-top设置当前盒子高度的一半，并且值为负