HTML复习笔记＜1＞

HTML笔记 （#+文字）

斜体 一个*号夹起来

加粗 两个**夹起来

斜体加粗 三个***夹起来

删除线 两个~~

两个>左括号

引用

引用2

分割线—

---

列表

• 列表 - +内容

• 列表 + +内容

• 列表 * +列表

1. 列表1

2. 列表2 数字+点和空格

3. 列表

   • 激昂奋进
   • jfa

4. 节哀；j

   • 就烦

代码 <h1> ` +夹起来

代码块 ```单独站一行

#include<stdio.h>
int main()
{
	printf("hello world!");
}

---

第一章 HTML初识

1. 标题标签

   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   

2. 段落标签

   <p>....</p>

3. 换行标签

   <br/>

4. 水平线标签

   <hr/>

5. 字体样式标签

   • <strong>加粗</strong>
     <em>斜体</em>
     

6. 注释和特殊符号

   空格 &nbsp

   版权符@ &copy

   引号 &quot

   大于 &gt

   小于 &It

7. 图像标签

   <img src="path" alt="不能加载时的代替图片文字" title="鼠标悬停提示文字" width="图片的宽" height="图片的高"/>

8. 链接标签

   （1）页面间的跳转 
   <iframe src="path" name="mainFrame" ></iframe>
   
   <a href="path" target="链接在哪个窗口打开，常用_self,_blank">链接文本或图像</a>
   例如
   <a href="WWW.baidu" target="_blank">百度</a>
   （2）锚链接：从A页面的甲位置跳转到本页中的乙位置
   		   从A页面的甲位置跳转到B页面中的乙位置
   创建跳转标记 <a name="marker">乙位置</a>
   创建跳转链接 <a href="#marker">甲位置</a>
   （3）功能性链接
   

9. 行内元素和块元素

   块元素：p h1~h6 div 每个 li 标签独占一行（块元素）

第二章 列表、表格与媒体元素

1. 无序列表、有序列表、自定义列表

   <ul>//声明无序列表
       <li>jaflahf</li>//声明列表项
       <li>jkjdsah</li>
       <li>jaflahf</li>
       <li>jkjdsaf</li>
   </ul>
   
   <ol>//声明有序列表
       <li>jaflahf</li>//声明列表项
       <li>jkjdsah</li>
       <li>jaflahf</li>
       <li>jkjdsaf</li>
   </ol>
   
   <dl>//自定义列表
       <dt>水果</dt> (块元素)      水果
       <dd>苹果</dd>	(块元素)  			苹果
       <dd>桃子</dd>				       桃子
       <dd>李子</dd>						李子
   </dl>
   
   

2. 表格

   <table>//表格标签
       <tr>//行标签
            <td>第1个单元格的内容</td>//单元格标签
            <td>第2个单元格的内容</td>
           ……
       </tr>
       <tr>
            <td>第1个单元格的内容</td>
            <td>第2个单元格的内容</td>
           ……
       </tr>
   </table>
   
   表格的跨列和跨行
   <tr>
           <td colspan="3">学生成绩</td>//跨列
   </tr>
   <tr>
           <td rowspan="2">张三</td>
           <td>语文</td>
           <td>98</td>
   </tr>
   
   
   

3. HTML5的媒体元素video、audio

   （1）图片
   <img src="path" alt="不能加载时的代替图片文字" title="鼠标悬停提示文字" width="图片的宽" height="图片的高"/>
   （2）视屏
   语法：<video src="视屏路径" controls></video>//control为播放控件
   例子：<video src="video.mp4" controls></video>
   主浏览器支持的视屏格式：
   <video controls>
       <source src="video/video.webm" type="video/webm"/>
       <source src="video/video.mp4" type="video/mp4"/>
   </video>
   自动播放属性
   <video autoplay>
       <source src="video/video.webm" type="video/webm"/>
       <source src="video/video.mp4" type="video/mp4"/>
       你的浏览器不支持video元素
   </video>
   （3）音频
   语法：<audio src="音频路径" controls></video>
   <audio controls>
       <source src="music/music.mp3" type="audio/mpeg"/>
       <source src="music/music.ogg" type="audio/ogg"/>
       你的浏览器不支持audio元素
   </audio>
   

4. html5的结构元素

   header 头部
   section 主体
   footer 脚部
   
   article 独立文章内容
   aside 侧边栏
   nav 导航栏
   
   

第三章 表单

1. 表单的语法

   （1）表单语法
   <form  method="post" action="result.html">
      <p>  名字：<input name="name" type="text" >  </p>
      <p>  密码：<input name="pass" type="password" >  </p>
      <p>
         <input type="submit" name="Button" value="提交"/>
         <input type="reset" name="Reset" value="重填“/> 
      </p>
   </form>
   （2）表单元素格式
   <input  type="text"  name="fname" value="text"/>
   （3）表单属性
   name：   指定表单元素的名称
   value： 	元素的初始值。type 为 radio时必须指定一个值
   size：	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单		   位。对于其他类型，宽度以像素为单位
   checked：type为radio或checkbox时，指定按钮是否是被选中                             
   maxlength：type为text 或 password 时，输入的最大字符数
   type：
   	文本框：<input  type="text"  name="userName" value="用户名" size="30" 	   				maxlength="20" />
   	密码框：<input  type="password "  name="pass"  size="20" />
   	单选按钮：<input name="gen" type="radio" value="男"  checked  />男（选中状态）
   			<input name="gen" type="radio" value="女" />女
   	复选框：<input type="checkbox" name="interest" value="sports"/>运动
   		   <input type="checkbox" name="interest" value="talk" checked />聊天
   		   <input type="checkbox" name="interest" value="play"/>玩游戏
   #	下拉列表框：<select name="列表名称" size="行数">
                 <option value="选项的值" selected="selected">…</option >
                 <option value="选项的值">…</option >
                 </select>
   	按钮：
   		重置按钮：<input  type="reset" name="butReset" value="reset按钮">
   		图片按钮：<input  type="image"  src="images/login.gif" />
   		普通按钮：<input  type="button" name="butButton" value="button按钮"/>
   		
   textarea：多行文本域
   	<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >
   		x行数	y列数
   file：文件域
   	<form action="" method="post" enctype="multipart/form-data">
     	<p>
     	<input type="file" name="files" />
     	<input type="submit" name="upload" value="上传" />
     	</p>
   	</form>
   email：邮箱
       <p>邮箱:<input type="email"  name="email"/></p>
       <input type="submit"/>
   url：网址
   	<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
   	<input type="submit"/>
   number：数字
   	<p>请输入数字:<input type="number"  name="num" min="0" max="100" 		       step="10"/></p>
   	<input type="submit"/>
   range：滑块
       <p>请输入数字:<input type="range"  name="range1" min="0" max="10" 	           step="2"/></p>
       <input type="submit"/>
   search：搜索框
       <p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
       <input type="submit"/>
   
   

2. 表单的高级应用

   隐藏域hidden：<input type="hidden" value="666" name="userid">
   只读域readonly：<input name="name" type="text" value="张三"  readonly>
   禁用域disable：<input type="submit "  disabled   value="保存" >
   
   表单元素的标注：
       <label for="id">标注的文本</label>
       <input type="radio" name="gender" id="male"/>
   
   

3. 表单初级验证方法

   <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
   <input type="text" name="username"  required/>
   <input type="text" name="tel"  required pattern="^1[358]\d{9}" />
   
   

第四章 css的选择器

1. css语法规则

   （1）选择器
   选择器｛
   	声明1；
   	声明2；
   	...}
   （2）style标签
       <style type="text/css">
       h1 {
           font-size:12px;
           color:#F00;
       }
       </style>
   
   

2. HTML中引入css样式

3. css选择器

   • 基本选择器

   • 高级选择器

   第五章 css美化网页（文字、背景）

   1. 字体样式

      （1）font-family 设置字体类型 font-family:"隶书";
      	body{font-family: Times,"Times New Roman", "楷体";}
      	
      （2）font-style 设置字体风格 font-style:italic;
      	属性：normal、italic和oblique
      
      （3）font-weight设置字体的粗细 font-weight:bold;
      	normal
      	bold 粗体字体
      	bolder 更粗的字体
      	lighter 更细的字体
          100、200、300、400、500、600、700、800、900 定义由细到粗的字体
      											 400等同于normal，700等同于bold
      
      （4）font-size设置字体大小font-size:12px;
      	单位
              px（像素）
              em、rem、cm、mm、pt、pc
              h1{font-size:24px;}
              h2{font-size:16px;}
              h3{font-size:2em;}
              span{font-size:12pt;}
              strong{font-size:13pc;}
      
      
      font 在一个声明中设置所有字体属性font:italic bold 36px "宋体";
      字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
      	p span{font:oblique bold 12px "楷体";}
      

   2. 文本样式

      (1)text-decoration 设置文本的装饰 text-decoration:underline
      	none 默认值，定义的标准文本
      	underline 设置文本的下划线
      	overline 设置文本的上划线
      	line-through 设置文本的删除线
      (2)text-indent 设置首行文本的缩进 text-indent:20px;
      
      (3)text-align设置元素水平对齐方式text-align:right;
      (4)line-height设置文本的行高line-height:25px;
      (5)color设置文本颜色color:#00C;
          RGB
          	十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
          	rgb(r,g,b) : 正整数的取值为0～255
          RGBA
          	在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
      	color:#A983D8;
          color:#EEFF66;
          color:rgb(0,255,255);
          color:rgba(0,0,255,0.5);
      (6)文字阴影text-shadow : color  x-offset  y-offset  blur-radius
      

   3. 背景样式

      （1）背景图像

      ​ background-image属性

           background-mage:url(图片路径);
      

      （2）背景重复方式

      background-repeat属性

      ​ repeat**：沿水平和垂直两个方向平铺**

      ​ no-repeat**：不平铺，即只显示一次**

      ​ repeat-x**：只沿水平方向平铺**

      repeat-y**：只沿垂直方向平铺**

      （3）背景定位

      background-position属性

      Xpos Ypos	**单位：*px， Xpos****表示水平位置，Ypos表示垂直位置
      X% Y%	使用百分比表示背景的位置
      X**、Y方向关键词**	水平方向的关键词： left**、center、right 垂直方向的关键词： top、center、**bottom

      （4）背景属性

      background****属性

      .title {

      font-size:18px;

      font-weight:bold**;**

      color:#FFF;

      text-indent:1em;

      line-height:35px;

      background:#C00 url**(…/image/arrow-down.gif) 205px 10px no-repeat**

      （5）背景尺寸 background-size

      auto	默认值，使用背景图片保持原样
      percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
      cover	整个背景图片放大填充了整个元素
      contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

   4. css3渐变

      线性渐变

      颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

      linear-gradient ( position, color1, color2,…)

      径向渐变

      圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

第六章 盒子模型

1. 盒子模型的使用

   （1）边框

   ​ n边框

    **border-color**
   

   border-top-color	上边框颜色	border-top-color:#369;
   border-right-color	右边框颜色	border-right-color:#369;
   border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
   border-left-color	左边框颜色	border-left-color:#efcd56;
   border-color	四个边框为同一颜色	border-color:#eeff34;
   上、下边框颜色**：#369** 左、右边框颜色：**#000**	border-color:#369 #000;
   上边框颜色**：#369** 左、右边框颜色：#000** 下边框颜色：****#f00**	border-color:#369 #000 #f00;
   上、右、下、左边框颜色**：** #369**、#000、#f00、****#00f**	border-color:#369 #000 #f00 #00f;

   ​ 边框的粗细

   ​ nborder-width

   uthin

   umedium

   uthick

   u像素值

   border-top-width:5px;

   border-right-width:10px;

   border-bottom-width:8px;

   border-left-width:22px;

   border-width:5px ;

   border-width:20px 2px;

   border-width:5px 1px 6px;

   border-width:1px 3px 5px 2px

   ​ 边框的样式

   nborder-style

   unone

   uhidden

   udotted

   udashed

   usolid

   udouble

   border-top-style:solid;

   border-right-style:solid;

   border-bottom-style:solid;

   border-left-style:solid;

   **border-**style:solid ;

   **border-**style:solid dotted;

   **border-**style:solid dotted dashed;

   **border-**style:solid dotted dashed double

   ​ border简写

   n同时设置边框的颜色、粗细和样式

   border:1px solid #3a6587**;**

   border: 1px dashed red;

（2）内边距

​ npadding

upadding-left

upadding-right

upadding-top

upadding-bottom

upadding

​ padding-left:10px;

padding-right: 5px;

padding-top: 20px;

padding-bottom:8px;

padding:20px 5px 8px 10px ;

padding:10px 5px;

padding:30px 8px 10px ;

padding:10px;

（3）外边距

​ margin

margin-top: 1 px

margin-right : 2 px

margin-bottom : 2 px

margin-left : 1 px

margin :3px 5px 7px 4px;

margin :3px 5px;

margin :3px 5px 7px;

margin :8px;

umargin-top

umargin-right

umargin-bottom

umargin-left

umargin

​ 网页居中****对齐

​ margin:0px auto

（4）盒子总尺寸

​ 盒子模型总尺寸**=****border+padding+margin+**内容宽度

（5）box-sizing

​ box-sizing**：content-box （默认值，盒子的总尺度**）| border-box（**盒子的宽度或高度等于元素内容的宽度或高度） | inherit

1. 圆角边框

   border-radius: 20px 10px 50px 30px**;（n四个属性值按顺时针排列）

   n**圆形**
   
    **div{**
   
       **width: 100px;**
   
         **height: 100px;**
         **border: 4px solid red;**
   
         **border-radius: 50%;**
       **}**
   
   

2. 盒子阴影

   box-shadow:inset (阴影类型内阴影)x-offset (X轴位移，指定****阴影水平位移量)y-offset(Y****轴位移，用来指定阴影垂直位移量) blur-radius (阴影模糊半径阴影向外模糊的模糊范围)color(阴影颜色，定义绘制阴影时所使用的颜色)

第七章 浮动

1. n标准文档流组成

   u块级元素（block）

   <h1>…<h6>、<p>、<div>
   

   内联元素（inline）

   <span>、<a>、<img/>、<strong>...
   

2. display属性

   block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
   inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
   inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
   none	设置元素不会被显示

3. 可以使用什么属性使块元素排在一行？

   inline-block

   float

   .layer01 {
   	border:1px #F00 dashed;
   	float:left;
   }
   .layer02 {
   	border:1px #00F dashed;
   	float:right;
   }
   
   
   

4. nclear****属性

   left	在左侧不允许浮动元素
   right	在右侧不允许浮动元素
   both	在左、右两侧不允许浮动元素
   none	默认值。允许浮动元素出现在两侧

   img {
   	clear:both;
   }
   
   

   nclear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？

   u浮动元素后面加空****div

   <div class="clear"></div>
   
   .clear{  clear: both;  margin: 0; padding: 0;}
   
   <div id="father">
     <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
     <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
     <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
     <div class="layer04">浮动的盒子……</div>
   </div>
   #father {overflow: hidden;border:1px #000 solid; }
   
   
   

   noverflow****属性

   visible	默认值。内容不会被修剪，会呈现在盒子之外
   hidden	内容会被修剪，并且其余内容是不可见的
   scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
   auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

第八章 定位网页元素

精灵图的代码书写

（1）缩小一半

（2）测量图标大小

（3）写代码

（4）背景图片定位

（5）缩放背景图一半

.user::before{
    content: "";
    display: block;
    /* 盒子的大小 */
    width: 23px;
    height: 23px;
    /* 添加背景 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 精灵图缩放 */
    background-size: 104px auto;
    /* 上左右下 */
    margiuto -2px;
}

第一章 flex布局

000 solid; }

n**overflow****属性**

| **visible** | **默认值。内容不会被修剪，会呈现在盒子之外**               |
| ----------- | ---------------------------------------------------------- |
| **hidden**  | **内容会被修剪，并且其余内容是不可见的**                   |
| **scroll**  | **内容会被修剪，但是浏览器会显示滚动条以便查看其余内容**   |
| **auto**    | **如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容** |

### 第八章 定位网页元素

精灵图的代码书写

（1）缩小一半

（2）测量图标大小

（3）写代码 

（4）背景图片定位

（5）缩放背景图一半

.user::before{
content: “”;
display: block;
/* 盒子的大小 /
width: 23px;
height: 23px;
/ 添加背景 /
background: url(…/images/sprite.png) no-repeat -59px -194px;
/ 精灵图缩放 /
background-size: 104px auto;
/ 上左右下 */
margiuto -2px;
}

### 第一章 flex布局