HTML基础（l01-l03）

L01

01 meta标签

<!-- meta标签提供关于HTML文档的元数据，元数据指的是网页自身的数据-->
    <meta charset="UTF-8">
    <!-- kewords页面关键词，通过content属性设置具体的关键词
    作用：当用户通过搜索引擎搜索对应关键词，可以提高网站被搜索到的概率。 -->
    <meta name="keywords" content="前端，web前端"/>
    <!-- 页面描述，设置name属性值为description，通过content属性设置具体的描述内容
    作用：为了提高网页的搜索率 -->
    <meta name="description" content="前端学习"/>

02 link标签

在title后面写

<!-- link标签，给网页导入外部资源 比如：外部样式，选项卡-->
    <!-- 通过link标签，导入选项卡图标，rel属性设置外部资源类型，href属性设置资源路径.
    icon表示图标资源， ./表示的是当前路径  -->
    <link rel="icon" href="./favicon.ico">

03 常用内容标签

<h*> </h*> 标题标签

<p> </p>    段落标签

<strong> <strong/> 加粗标签    <em> </em> 倾斜标签

<hr> 水平线标签

<br> 换行

04 常用特殊符号

&nbsp; 空格     

&lt;表示＜小于，&gt;表示＞大于

&quot;表示双引号

&copy;版权符号

05 图片标签

img是图片标签，通过src属性设置图片地址，地址可以是本地地址，也可以是网络地址

title属性设置图片标题，鼠标悬停在图片上显示。

width设置图片的宽度，height设置图片的高度。（当宽度或者高度只设置一个时，另外一个会等比调整。)

alt是图片替代文字，当图片无法正常显示时，显示对应的文字。

<img src="./路径" title="图片标题" alt="图片加载错误···" width="" height="">

06 超链接

1.页面间链接

a是超链接标签，href属性用于设置跳转地址（可以是本地地址，也可以是网络地址）

target属性设置跳转方式：

        属性值包括：_self（替换自身窗口）、_blank（打开新窗口）

<a href="./course07.html" target="_self">查看图片（_self）</a>
<a href="./course07.html" target="_blank">查看图片（_blank）</a>

2.锚链接

一组锚链接需要写两个a标签，一个a标签定义锚标记，另一个a标签定义连接。

name属性定义的是标记，href中通过#来链接地址（链接地址通过#标记名称的方式定义）。

<a href="#bx">冰箱 </a>
<h1><a name="bx">冰箱</a></h1>

如果要跨页面跳转锚链接，href属性要先设置跳转路径，在路径后面再用#设置一个锚标记

<a href="./course09.html#bx" target="_blank">冰箱</a>

3.功能性链接

<!-- 功能性链接，用于打开本地软件。如：打开邮箱软件给指定的邮箱地址发邮件，打开qq软件给指定qq号发消息 -->
    <a href="mailto:1159346729@qq.com">发送邮件</a>
    <a target="_blank" href="http://wap.qq.com/msgrd?V=1&Uin=2279698819&Site=OK&Menu=yes">联系qq</a>

07 标签分类

所有的标签分为：

  块级标签：该元素独占一行（h2、p）

  行级标签（内联标签）：按行显示，一行不够放才会自动换行（a、strong、em、img）

FAO：一般行标要放在块标里面使用，p标签不能嵌套p标签。

div：分区标签，是一个块级标签，常用于网页布局。

span：范围标签，是个行级标签，常用于突出显示段落的部分内

L02

01 有序列表和无序列表

1.有序：<ol > <ol>

可以通过type属性设置序号类型，属性值包括：A、a、I（罗马数字）、i、1。

<ol type="A"> </ol>

2.无序：<ul> <ul>

通过type属性设置符号类型，属性值包括：disk(实心圆)，square(实心正方形)，circle)(空心圆)，decimal(数字)。

<ul type="circle"> </ul>

注意：列表与列表之间是可以嵌套的。

02 定义列表标签

<dl> </dl> 定义列表的标签

<dt> </dt> 定义列表的标题标签

<dd> </dd> 定义列表的描述标签

<dl>
    <dt></dt>
    <dd></dd>
</dl>

03 表格标签

<!-- table是表格标签 
         border是边界线-->
    <table border="1" width="500" height="300">
       <!-- tr是行标签（默认是水平靠左） -->
       <!-- align属性是设置单元格内容水平对齐方式
            包括:left,center,right -->
       <!-- valign属性是设置单元格内容垂直对齐方式
            包括:top，middle，bottom -->
       <tr align="center" valign="bottom">
           <td></td>
       </tr> 

表格完整结构一般是：

    <!-- cellspacing设置单元格之间的间隙 -->
    <table cellspacing="0" border="1" width="400" height="200">
        <!-- caption是表格的标题标签 -->
        <caption>学生成绩表</caption>
        <!-- 表格根据结构划分成：头部，主体，尾部 -->
        <thead>
            <tr>
                <!-- th是表头标签，跟td的区别是，th会自动加粗并居中 -->
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>             
            </tr>
         <tfoot>
            <tr>
                <td colspan="4" align="center">
                    <!-- 超链接的href属性设置成#，表示空链接 -->
                    <a href="#">设置跳转</a>
                </td>
            </tr>
        </tfoot>
</table>

表格根据结构划分成：头部，主体，尾部。

<thead> </thead>头部 ； <tbody> </tbody>主体；<tfoot> </tfoot>尾部。

04 表单

1.表单标签

form是表单标签，表单作用：接收用户输入数据，并向服务器发送。

action属性设置表单的提交地址，其实就是服务器地址。

method属性设置表单的提交方式：get/post（post比get更安全）。

<form action="" method="post">
        <p>登录名：<input type="***"></p>
        <p>密码：<input type="*****"></p>
        <p>
            <input type="submit" value="提交">
        </p>
</form>

2.常用表单元素

input是表单的元素标签，通过type属性设置元素类型； text是文本框；maxlength设置最大输入长度。

<input type="text" size="10" maxlength="4">

password是密码框。

 <input type="password">

radio是单选框，value属性设置具体的值，一组单选框需要设置相同的name属性值。

checked属性设置默认选中，属性值也是checked，在html标签中属性值跟属性名相同时可以省略属性值。

<input type="radio" value="1" name="sex" checked>男
<input type="radio" value="0" name="sex">女

checkbox是复选框，也可以使用checked属性设置默认选中。

<input type="checkbox" checked>琴
<input type="checkbox">棋
<input type="checkbox">书
<input type="checkbox">画

select标签是下拉框，selected属性设置下拉框默认选中。

<select>
        <!-- selected属性设置下拉框默认选中 -->
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
</select>

file是文件域，用于选择文件；

button是普通按钮。

<!-- file是文件域，用于选择文件 -->
<input type="file">
<!-- button是普通按钮 -->
<input type="button" value="上传">

textarea标签是多行文本框，cols属性设置列数，rows属性设置行数。

<textarea cols="30" rows="10"></textarea>

submit是提交按钮，点击该按钮后，会将表单里面的数据向服务器提交。

reset是重置按钮，点击该按钮后，会重置表单中所有的数据。

image是图片提交按钮，功能和submit一样，不需要设置valu属性，但是需要在scr中设置一个图片地址。

hidden是隐藏，用于在网页中隐藏一些不需要显示的内容。注意：实际开发中，隐藏域里面的内容需要加密以后再隐藏。

 <!-- submit是提交按钮，点击该按钮后，会将表单里面的数据向服务器提交 -->
<input type="submit" value="提交">
 <!-- reset是重置按钮，点击该按钮后，会重置表单中所有的数据 -->
<input type="reset" value="清空">
 <!-- image是图片提交按钮，功能和submit一样
     不需要设置valu属性，但是需要在scr中设置一个图片地址。 -->
<input type="image" src="./img/f.jpg"> 
  <!-- hidden是隐藏，用于在网页中隐藏一些不需要显示的内容。
  注意：实际开发中，隐藏域里面的内容需要加密以后再隐藏。 -->
<input type="hidden" value="隐藏的内容">

注意：表单中如果要上传文件，表单需要这个enctype="multipart/form-data"属性（它表示表单属性是一个多类型数据）

<form enctype="multipart/form-data">

3.禁用和只读属性

readonly属性，设置表达元素的内容为只读。

设置id为isOK，表示同意只读内容才可以进行下一步注册或者登录操作。

<p><input id="isOK" type="checkbox">是否同意</p>
<p><input id="btn" type="submit" value="注册" disabled></p>

4.label标签

label标签，通常用于配合表单元素，让表单元素快速获得光标。

表单元素需要添加id属性，再通过label标签的for属性指向对应的表单元素的id属性。

<form>
        <p>
            <label for="loginID">账号：</label> 
            <input id="loginID" type="text"></p>
        <p>
            <label for="loginPwd">密码：</label> 
            <input id="loginPwd" type="password"></p>
        <p>
            <label for="address">地区：</label>
            <select id="address">
                <option value="1">北京</option>
                <option value="2">上海</option>
            </select>
        </p>
</form>

5.HTML5新增表单元素

number是数字文本框，该文本框只能写数字，max属性设置最大值，min属性设置最小值，step属性设置数据间隔。

range是数据滑块，用于表述数据，也可以通过max，min，step属性。

email是邮箱文本框，自带验证邮箱格式的功能（邮箱必须包含@符号）。

url是网址文本框，自带验证网址格式的功能（必须以ftp：http: https：开头）。

search是搜索文本框，跟普通文本框的区别是，自带清除的小按钮。

在html5中，新增了button按钮标签，通过type属性设置按钮类型，submit是提交按钮，reset是重置按钮，button是普通按钮。

<p>年龄：<input type="number" max="100" min="0" step="5"></p>
<p>满意度：<input type="range" max="100" min="0" style="width: 200px;" step="10"></p>
<p>邮箱：<input type="email"></p>
<p>网址：<input type="url"></p>
 <!-- text也可以，但是html5有专门针对搜索的文本框 -->
<p>搜索：<input type="search"></p>
<p>搜索：<input type="text"></p>
<p><input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通"></p>
 <!--按钮两种写法。  -->
<p><button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通</button></p>

6.HTML5新增的表单属性

palceholder属性，设置文本框的提示信息，提示的内容在输入真实的文本框内容时消失。

required属性，给文本框添加非空验证。

partten属性，用于给文本框添加正侧验证。

<p>账号：<input type="text" placeholder="请输入账号" required></p>

L03

01选择器

1.基本选择器

标签选择器：以标签的名称定义选择器，里面定义的样式作用于所有该标签。

类选择器： 选择器的名称是自定义的，必须以.开头，在标签中通过class属性指定具体的类选择器,在调用的时候不需要加.。

id选择器：选择器的名称是自定义的，必须以#号开头，在标签中通过id属性指定具体的id选择器，在调用的时候不需要加#。id选择器通常用于唯一元素，类选择器没有这个要求。

!important设置样式为最高级别，任何选择器都无法覆盖。

总结：基本选择器的优先级：!important > id选择器 > 类选择器 > 标签选择器

2.层次选择器

后代选择器：方式是A B{}。对A里面所有B添加样式。

子选择器：A>B{}。对A里面所有第一级的B添加样式。

相邻兄弟选择器：

 /* （加一个li让mi的下一个变大了）+是相邻兄弟选择器，方式是A+B{}，B必须是A相邻的下一个元素 */
        .mi+li{
            font-size: 25px;
        }

<ul>
        <li>do</li>
        <li>ri</li>
        <li class="mi">mi</li>
        <li>fa</li>
        <li>so</li>
</ul>

通用兄弟选择器：方式是：A~B{}，对A下面所有的B元素添加样式。

.mi~li{ 
            color: aqua;
        }

<ul>
        <li>do</li>
        <li>ri</li>
        <li class="mi">mi</li>
        <li>fa</li>
        <li>so</li>
</ul>

3.属性选择器

属性选择器，方式：[属性名称]

<style>
p[name]{
        /* p[name]的意思是是一个p标签，同时具有name的属性 */
            font-size: 20px;
        }
</style>

属性选择器，可以根据属性值，精确的对某些标签添加样式。

<style>
[name="beijing"]{
            font-weight: bold;
        }
</style>

^= 表示以指定的属性值开头。

<style>
[name^="b"]{
            color: red;
        }
</style>

$= 表示以指定的属性值结尾（意思是属性值里面包含有jing的，就可以被设置）。

<style>
[name$="jing"]{
            background-color: blue;
        }
</style>

*=属性值包含指定的内容（就是属性值里面有这个值）。

<style>
[name*="i"]{
            text-decoration: underline;
        }
</style>

4.交集和并集选择器

交集选择器，方式是：选择器A选择器B{}（中间没有空格），同时满足A和B的元素，添加样式。想要使同种标签的某一个标签变化，需要使用交集选择器。

并集选择器：方式是：A,B,C{},给多个选择器，设置相同样式。

可以将不是同一种标签的数据，通过并集选择器实现设置相同的样式。

<style>
.iphone,.xiaomi{
            font-size: 30px;
            color: chartreuse;  
        }
</style>

<ul>
        <li class="iphone">iphone</li>
        <li>huawei</li>
</ul>
<ol>
        <li class="xiaomi">小米</li>
        <li>三星</li>
</ol>

02样式

1.行内样式

在标签上通过style属性添加行内样式。

 每一个样式，由属性名和属性值组成，方式是（属性名：属性值），多个样式属性用分号隔开。

<p style="font-size: 30px;color: aqua;">HelloWord</p>

2.内部样式

（内部样式可以做到当前页面样式复用，但是不能做到多页面样式的复用，内容与表现的分离不够彻底。）

在head标签中，使用style标签，用于定义内部样式。 type属性设置样式的类型为文本样式（不设置默认也是text/css）。

<style type="text/css">
      /* 在style标签里面通过定义选择器得到方式定义样式
            选择器：是选取指定网页元素的规则。作用：选取指定的网页元素（标签），并给它添加样式。
      */
      /* 下面的这个选择器，就是选取当前网页所有的p元素 */
      p{
        /* 在选择器中，定义具体的样式 */
         font-size: 30px;
         font-weight: bold;
         color: aqua;
      }
</style>
<!-- 只对p标签起作用 -->
<body>
    <h2>HelloWord</h2>
    <p>你好世界</p>
    <h2>好好学习</h2>
    <p>天天向上</p>
</body>

3.外部样式

外部样式文件，通过link标签导入。

通过link标签引入外部样式，href属性设置样式文件的路径。

<link rel="stylesheet" href="./css/external style.css">

注意：外部样式文件的后缀名是 xxx.css，然后在样式文件中写选择器。

下面样式是在.css里面写的：

p{
     font-size: 30px;
     font-weight: bold;
     color: orange;
  }

    FAO：必须设置rel属性的设置路径为stylesheet，告诉浏览器引入外部资源是样式表资源。

    如果有多个页面需要该样式，直接引入，方便多页面复用；网页的内容和样式彻底分离，这样的网页更利于搜索引擎搜索。

4.样式的优先级

1.通过link标签导入外部样式。

<link rel="stylesheet" href="./css/Style P.css">

2.通过style标签，用@import url()导入外部样式

<style>
        @import url('./css/Style\ P.css');
</style> 

注意：外部样式和内部样式的优先级，采取的是就近原则（指后引入的样式会将前面引入的样式覆盖掉）。

行内样式的优先级最高（但开发中不怎么用）。

5.字体样式

font-size设置字体大小。

font-weight设置字体粗细，属性值包括：lighter、normal、bold、bolder。

font-style设置字体风格，属性值italic表示倾斜。

font-family设置字体类型；Courier New（幼圆），英文用英文字体，中文用中文字体。

6.文本样式

color属性设置文本的颜色。

         1. 颜色的属性值可以是颜色单词。

         2. 颜色的属性值，可以是十六进制颜色值，#红绿蓝透明度（透明度取值0-255）。

         3. 可以使用rgb（0，0，0）来设置。

text-align属性设置文本的对齐方式，属性值包括：left、right、center。

text-indent属性设置首行缩进，首行缩进的单位通常给em

           px表示像素。

           1em表示当前元素的font-size大小。

           1rem表示网页根元素的font-size大小，默认是16px。

text-decorration属性设置文本装饰，属性值包括：

           underline 下划线

           overline 上划线

           line-through 中划线

           none 文本无装饰

word-spacing设置单词间距，针对于英文，设置单词之间的间距。

letter-spacing是字符间距，适用于中文，设置每个字符之间的间距。

7.超链接样式

a:link 表示未点击的样式 。

a:visited 表示点击过后的样式。（只能设置颜色）

a:hover 表示鼠标悬停样式 。

a:active表示点击未释释放样式(点击不松开的时候) 。

顺序必须是link 、visited、 hover、 active 。

8.列表样式

list-style-type属性设置列表类型，属性值包括：disc（实心圆）···

list-style-image属性设置列表图标，通过url设置图标地址

list-style-position设置列表样式的位置，属性值包括：inside（列表往里缩进一个tab符）和outside(默认值)。

list-style-image: url(../L03/img/1.jpg);

list-style-position: outside;

list-style是缩写属性，既可以设置列表符号，也可以设置列表图标（可以同时设置）。

list-style:url(../L03/img/1.jpg) inside;

9.背景样式

background-color属性设置背景颜色。

background-image 设置背景图片，通过url设置图片地址。

background-repeat 设置背景图片的重复方式，属性值包括：repeat，repeat-x，repeat-y，no-repeat。

background-position 设置背景图片的位置。

                1.通过top、bottom、center、left、right

                2.也可以通过具体的X轴位移值 和 Y轴位移值，设置背景图片的位置。

               注意：正数向右和向下，负数向左和向上  例：background: position: 50px 100px;(只给一个值另一个就会默认居中)

                       X轴位移值 和 Y轴位移值也可以是百分比  background: position: 20% 50%;

使用背景属性抠图，通过backgroud-position属性确定背景图片的位置，属性值一般都是给负数，

               再通过宽高属性width和height属性设置容器的大小正好可以显示抠取出来的图片区域大小。

10.背景图片大小

backgroud-size 设置背景图片大小

               属性值contain表示:等比拉伸，直到跟任意一边容器边框重叠

               cover 表示：等比拉伸跟所有边与容器边框重叠（可能会导致图片显示不全）

               可以设置固定的大小，一般不推荐，因为会是图片变形

               属性值也可以是百分比 例：background-size: 50% 50%；

<style>
.a{
            width: 500px;
            height: 280px;
            background-color: lightblue;
            background-image: url(../L03/img/3.jpg);
            background-repeat: no-repeat;
            background-size: contain; 
}
</style>

如果要在背景的缩写属性中，设置背景图片的大小，通过 / 在后面设置背景图片的大小（前面是位置后面是大小）。

<style>
.b{
            width: 500px;
            height: 280px;
            background: pink no-repeat url(../L03/img/3.jpg) 100px 100px / 50% 50%;
        }
</style>

11.背景渐变

linear-gradient()设置线性渐变。

            第一个参数是渐变的方向，方向渐变也可以写两个（例如右下 right bottom）；

            第二个参数往后都是渐变的颜色，颜色值至少是两个。

background: linear-gradient(to right,rgb(255, 0, 149),blue,white);

radial-gradient设置镜像渐变，没有渐变的方向，从中心点向四周渐变。

background: radial-gradient(rgb(255, 0, 149),white,blueviolet);

注意：背景设置为渐变后，就不能设置背景颜色和背景图片了。

12.文本的垂直居中

<style>
        .a{
            width: 400px;
            height: 400px;
            background-color: lightcoral;
            color: lightgrey;
            font-size: 20px;
            text-align: center;
            /* font-size：20px； */
            /* 设置行高的属性值＝容器高度的属性值，让单行文本垂直方向居中显示 */
            /* line-height: 400px; */
            /* 通过font同时设置字体大小和文本行高 */
            font: 20px/200px '宋体';
        }
</style>

13. 文本阴影

<style>
        .a{
            width: 400px;
            height: 400px;
            background-color: lightcoral;
            color: lightgrey;
            font-size: 20px;
            text-align: center;
            /* font-size：20px； */
            /* 设置行高的属性值＝容器高度的属性值，让单行文本垂直方向居中显示 */
            /* line-height: 400px; */
            /* 通过font同时设置字体大小和文本行高 */
            font: 20px/200px '宋体';
            /* text-shadow 属性设置文本阴影
               属性值分别是：X轴偏移量 Y轴偏移量 阴影的模糊半径 阴影颜色
               偏移量正数是向右和向下，负数是向左和向右 */
            text-shadow:5px 5px 3px black ;
        }
</style>

 14.设置图片两端文本的垂直对齐方式

vertical-align属性设置图片两端文本的垂直对齐方式，属性值包括：top,middle,bottom

            是给图片添加该属性，作用在图片两边的文本上。