HTML笔记（#+文字）

斜体一个*号夹起来

加粗两个**夹起来

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

删除线两个~~

两个>左括号

引用

引用2

分割线—

列表

列表 - +内容

列表 + +内容

列表 * +列表

列表1
列表2 数字+点和空格
列表
- 激昂奋进
- jfa
节哀；j
- 就烦

代码 <h1> ` +夹起来

代码块 ```单独站一行

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

第一章 HTML初识

标题标签

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

段落标签

<p>....</p>
换行标签

<br/>
水平线标签

<hr/>

字体样式标签

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

注释和特殊符号

空格 &nbsp

版权符@ &copy

引号 &quot

大于 &gt

小于 &It
图像标签

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

链接标签

（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）功能性链接

行内元素和块元素

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

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

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

<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>

表格

<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>

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>

html5的结构元素

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

第三章表单

表单的语法

（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"/>

表单的高级应用

隐藏域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"/>

表单初级验证方法

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

第四章 css的选择器

css语法规则

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

HTML中引入css样式

css选择器

基本选择器
高级选择器

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

字体样式

（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;normalbold 粗体字体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、pch1{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 "楷体";}

文本样式

(1)text-decoration 设置文本的装饰 text-decoration:underlinenone 默认值，定义的标准文本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～255RGBA在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1color:#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

背景样式

（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	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

css3渐变

线性渐变

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

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

径向渐变

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

第六章盒子模型

盒子模型的使用

（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

圆角边框

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

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

盒子阴影

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

第七章浮动

n标准文档流组成

u块级元素（block）
```
<h1>…<h6>、<p>、<div>
```
内联元素（inline）
```
<span>、<a>、<img/>、<strong>...
```

display属性

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

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

inline-block

float

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

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="data:image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="data:image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="data: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布局

HTML复习笔记＜1＞相关推荐

Spring复习笔记：4
在复习笔记三中我们进行的案例的编写,我们可以发现,就算使用了注解的方式,xml配置文件文件还是不能够删除,现在我们来将一些新的注解可以让我们去掉xml配置文件. @Configuration 作用:指 ...
matlab arr3(5 end),matlab复习笔记.doc
matlab复习笔记.doc 如果一个语句在一行内书写太长了,可能要另起一行接着写,在这种情况下我们需要在第一行末打上半个省略号(),再开始第二行的书写.历史命令窗口(THEHISTORYCOMMAN ...
数据结构(c语言版)笔记6,2020考研计算机《数据结构(C语言版)》复习笔记(6)
2020年计算机考研复习已经开始,新东方在线在此整理了2020考研计算机<数据结构(C语言版)>复习笔记(6),希望能帮助大家! 第六章树知识点整理树是n个结点的有限集合,非空时必须满 ...
2018.8.14-C#复习笔记总
2018.8.14-C#复习笔记总 using System; using System.Collections.Generic; //using System.Linq; using System. ...
2018.8.14-C++复习笔记总
2018.8.14-C++复习笔记总 // CPPTEST.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iost ...
2018.8.5 复习笔记
2018.8.5 复习笔记 1,"a" + "b" + 3 strcat double d = 3 object obj = d int i = (int)ob ...
复习笔记2018.8.3
复习笔记2018.8.3 1,"a" + "b" + 3 strcat double d = 3 object obj = d int i = (int)obj ...
HTML+CSS+JavaScript复习笔记持更（一）——标签篇
前言博主现在还是在校生,目前大三,突然想起HTML的很多基础都忘记的差不多了,于是买了几本基础书,创建这篇博文用于记录复习笔记,也希望我自己在整理的时候,能帮助大家加深一些基础知识的印象,本篇博文将 ...
Java基础复习笔记系列九网络编程
Java基础复习笔记系列之网络编程学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...
c++语言自定义操作符,C++语言复习笔记二
C++语言复习笔记二零.OOP 特征:抽象-封装-继承-多态一.自定义数据类型 1.类 class 类名 { private: 私有成员(本类) public: 公共成员(所有) protecte ...

HTML复习笔记＜1＞

HTML笔记（#+文字）

第一章 HTML初识

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

第三章表单

第四章 css的选择器

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

第六章盒子模型

第七章浮动

第八章定位网页元素

第一章 flex布局

HTML复习笔记＜1＞相关推荐

最新文章

热门文章

HTML复习笔记＜1＞

HTML笔记 （#+文字）

第一章 HTML初识

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

第三章 表单

第四章 css的选择器

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

第六章 盒子模型

第七章 浮动

第八章 定位网页元素

第一章 flex布局

HTML复习笔记＜1＞相关推荐

最新文章

热门文章

HTML笔记（#+文字）

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

第三章表单

第六章盒子模型

第七章浮动

第八章定位网页元素