千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

1.双标签和单标签：

<></> </>

<h1>:开标签

</h1>:闭合标签

<h1></h1>:完整标签对

<br>:可换行

单标签： 一般情况下单标签不修饰任何内容又称为空标签。

2.标签属性：

~1：书写在标签自己本身。

~2;可以为标签提供一些额外信息或者对标签进行修饰。

3.标签属性书写方法：

双：<h1属性名="属性值"></h1>

单：<img属性名="属性值">

<img>读取图片

4.标签大小：

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

5.段落标签：

<p>正文段落</p>（专于定义段落地）

&nbsp; :空格

&emsp; 自然段空格

对齐方式：

左侧对其: aligh="lef"

居中对其：align="center"

右侧对其：align="right"

6.图片插入：

情况一：<img src="图片路径">

情况二：<img src="文件夹名称/图片路径">

情况三：<img src="../(返回上级)/图片路径">

7.路径：

相对路径：根据文件和文件夹之间的关系，来确定文件查找途径的

1.页面和图片在同一文件夹，不需要定义路径

2.页面引用子文件里的图片，查找路径使用img1/img2/img3...

3.页面应用外层文件夹里的图片，路径查找使用../../../

绝对路径：从根目录开始通过完整的路径定义来查找资源的。

根：可能是网站域名，也可能是本地磁盘名

情况一：引用互联网资源（方法：直接使用互联网图片地址。）

情况二：引用本地磁盘中某一个文件夹的图片

4.图片进阶：“标签名和属性名并不冲突”

提示文本：

1.alt=“”（在破损和加载不出来时显示）（占用空间）

2.titile=“”（显示鼠标后面的文本提示）（1.title属性定义的内容不占空间的。

2.默认是隐藏的，只有鼠标划入时候才会显示）

网页可用图片格式：

gif jpg jpeg png bmp webp

有损压缩：有损压缩可以减少图像在内存和磁盘中占用的空间。

无损压缩：无损压缩不能减少图像在内存和磁盘中占用的空间。

gif：无损压缩

jpg：有损压缩

PNG：无显示质量损耗（有利于网络传输）

bmp：通常不压缩的

webp：包括有损压缩与无损压缩

超链接：（指将各种不同空间的文字性息组织在一起的网状文）

HyperText:超文本

超链接实现：<a></a>

跳转属性href：超文本应用

实操：<a href="目标页面的地址">显示在页面中的文本</a>

target：定义超链接的打开方式

—self 代表在当前页面打开

—blank 代表在空白页面打开

target="_..."

锚点链接（命名描记）：是页面内的超级链接，用来实行同一页面不同区域的跳转。

1.跳转目标的定义：

id属性=“锚点的名字”（锚点名字不能重复）

2.锚点的定义：

添加，href属性（属性值不再是地址了）=“通过#后面携带锚点的名字”

文本加粗：

<b>加粗的文本</b>

<strong>加粗的文本</strong>

b标签：b标签仅仅是为了加粗显示文本

strong标签：strong标签语义化更强，表示该文本比较重要。

文本倾斜：

<i>倾斜的文本</i>

<em>倾斜的文本</em>

i标签：i标签仅仅为了让字体显示倾斜，没有显示语义。

em标签：em标签不仅能让字体显示倾斜，还能加强语气。

删除线效果：

<s>删除线文本</s>

<del>删除线文本</del>

s标签：Html5，不支持

del标签：支持

给文本加入下划线：

<u>下划线文本</u>

角标标签：

^{上角标文本}

_{下角标文本}

注释方法：

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

有序列表: 指有序列表清单称之为有序列表

元素ol,元素li （ol和li是父子关系）

写法：<ol><li> </li></ol>(li必须要嵌套在ol里，ol 只能嵌套li)

<ol>

<li> 列表项内容 </li>

</ol>

设置项目符号：

<ol type="_"></ol>

要熟记的符号：

英文字母顺序：A,a

罗马数字顺序：l , i

阿拉伯数字顺序：1

设置启始序号：

<ol start="数字"></ol>

无序列表：指列表项中的内容，是没有时间、空间或者逻辑等顺序要求的。

语法：

<ul>

</li>...</li> (ul只能嵌套li)

</ul>

修改项目符号：

type="dise/circle/none/square"

实心园：dise 空心园：circle 隐藏项目符号：none 实心方块：square

自定义列表：

语法:

定义列表：<dl>

列表标题：<dt>

列表内容：<dd>

(dt标签和dd标签只能在dl里使用，dd和dt是dl的子标签，dd和dt是兄弟标签。dd和dt标签不可以单独使用。)

快速创建标签方法：

单个快速创建标签：

<标签名>{文本内容}

<标签名>{文本内容}*重复次数

标签${文本$内容}*重复次数

嵌套标签的快速书写：

父标签名>子标签名{子标签文本}*重复次数

父标签>子标签*复制次数>子标签[标签属性]

父标签>子标签+兄弟标签*重复次数

表格标签快捷键：

父标签>子标签*重复次数>子标签*重复次数

表格基础：

横排可以理解为：行

纵排可以理解为：列

每一个人可以看作：小的单元格

表格标签：

<table>

<tr> (一个tr代表一行)

<td> （一个td代表一个单元个）

.......

</td>

</tr>

</table>

（一个普通的表格每个tr里的td个数是相等的）

table标签修饰：

table文字加粗

<tr>

<th>加粗并居中</th>(把td改成th)

</tr>

table绘制表格线并且增加宽度与高度：

<table border="数值" width="总宽数值" height="总高度数值">

table改变单元格之间距离和单元格与文本的距离:

单元格之间距离: cellspacing="_"

单元格与文本的距离: cellpadding="_"

table改变颜色：

修饰表格背景颜色：bgcolor="_"

修饰表格的边框颜色：bordercolor="_"

table表格居中对齐：

<table align="left/center/right">

表格行tr属性：

tr宽度：<tr height="设置高度">

tr颜色：<tr bgcolor="颜色单词">

tr水平对齐方式：<tr align="left/center/right">

tr垂直对齐方式：<tr valign="top/middle/bottom">

左侧对齐：left 顶部对齐：top

居中对齐：center 居中对齐：midddle

右侧对齐：right 底部对齐：bottom

合并单元格：

rowspan="纵向合并行的总数"

colspan="横向合并列的总数"

（水平合并，横向跨列:colspan，垂直合并,纵向跨行:rowspan）

（只能横向或纵向相邻的单元格合并）

表格分类：

<caption>标题</caption>

caption:

<table>

<caption>标题</caption>

<tr>___</tr>

</table>

行分组

表格头：<thead></thead>

表格体：<tbody></tbody>

表格脚：<tfoot></tfoot>

（thead和tbody与tfoot 为同级，一个表格只允许使用一个thead和一个tfoot,但是允许使用多个tbody。）

列分组：

<colgroup span="数值"></colgroup>

colgroup:把一列或者连续的几列分成一组。

颜色值和长度表现方法：

颜色值：

颜色名称：1.必须使用这140个标准的英文名称 2.中文汉字不能作为颜色值

十六进制值：指使用 #RRGGBB 的形式来定义颜色值。

十六进制颜色值：

RR GG BB （00~FF）

红色 绿色 蓝色 （色彩强度）

# 00 00 FF

RGB值：指使用RGB(red,green,blue)的形式来定义颜色。

RGB颜色值：

RGB(red,green,blue) 0-255中的整数。（1.不区分大小写。2.括号里的数字和逗号前后可以有空格。3.所有浏览器都支持。）

长度单位：

绝对长度单位：固定的，用这些单位表示的长度会显示为设置的尺寸。

如：厘米（cm） 毫米（mm） 英（in）

px(像素)

相对长度单位：指相对于一个长度计算出来的长度，一般用来适配不同的设备。

如：百分比（%）

块级元素和内联元素：

Html中的两种元素：

1.block-level 块级（块元素）

2.inline 内联（行内元素）

div和span标签：

div标签：用于定义HTML文档中的一个分块或一个部分。

div语法：<div>内容</div>

span标签：用于标记文本的一部分或文档的一部分。

span语法：<span>内容</span>

块元素：

1.总是从新行开始。

2.浏览器会自动在元素的前后添加一些边距。

3.总是占据可用的全部宽度，尽可能的向左和向右伸展。

学习过的块元素：

标题元素：<h1>-<h6>

段落元素：<p>

列表元素：<ol>，<ul>，<li>，<dl>，<dt>，<dd>

表格元素：<table>，<tr>，<td>，<th>，<thead>，<tfoot>，<caption>

分块元素：<div>

内联元素：（不会独占一行，只占用必要的宽度），（内联元素里面不能嵌套块级元素。）

链接元素：<a>

文本修饰元素：<b>，<em>，<i>，<strong>，<sub>，<sup>

折行元素：<br>

图片元素：<img>

范围元素：<span>

初始表单：

表单控件：所有控件都要定义在<form>里面。

表单控件语法：<form></form>

文本框和密码框：

文本框：是让用户输入文本的一个控件区域。

input语法：

<form>

<imput type="text/password">

</form>

单行文本框：type值为text

密码文本框：type值为password

type:输入控件的类型

多行文本框：

语法：<form><textarea><textaea><form>

指定文本宽度：<taxtarea cols="数字"></~~>

指文本可见行数：<textarea rows="数字"></~~>

单选和多选：

单选：<form>

<input type="radio" name="gender">

</form>

1.单选框控件必须成组使用才有意义，每组至少需要两个单选框

2.“组”是通过name属性来建立的，凡是name值相同的就是一组。

3.同组的单选框，只有一个会处于选中状态，其他的会自动呈现为未选中状态

多选：<form>

<input type="checkbox">

</form>

单选框和多选框默认选中效果：

<input checked="checked"或直接checked>

下拉菜单：

语法：

<select>

<option></option> (select标签里面只能放置option标签)

</select>

更改下拉菜单默认选择：

<option selected></~~>

下拉菜单多选：

<select multiple></~~>

修改下拉菜单默认可见行数：

<select size=“数字”></~~>

选择文件:

<input type="file">

label标签和只读禁用属性

form

<label for="username"></label>

<input type=“text” id="username">

form

一个页面不能出现两个相同id属性值。

只读属性：

<input type="text" readonly value="">

value(值，作用给输入框一个默认值)

readonly（已读的意思）

点击不可选中:

<input type=""radio disabled>

disabled(禁用的意思，可以给任何组件)

禁用表单控件值是不会被收集和发送给后端的。

表单分组控件：

<fieldset>\

<legend>标题</legend>

</fieldset>

表单按钮:

按钮分类:（提交，重置，普通，图像，双标签button按钮）

提交按钮:具有确定提交信息同时发送标点数据给后台的功能。

<input type=“submit”>

submit：提交

<form action="服务器地址" target="_blank" method="post"> _slef

get

get:是默认值，浏览器会把收好的表单数据，加到服务器地址后面，提交给服务器

post值不但能收集表单的数据，而且不会在地址栏里暴露隐私数据

action:行动，用户点击提交按钮后做什么动作

重置按钮：

<input type="reset">

reset:重置，复位

普通按钮:

<input type="button" value="普通按钮">

button:按钮 value:按钮名字

图像按钮：

<input type="image" src="图片路径">

image:图像

双标签button按钮:

<button>名字</button>

button:默认具备点击提交表单功能

<button type="button">名字</button>

加上type="button"变为普通按钮

表单的数据采集和提交：

<input type="text" name="值">

password

name:使值储存用户内容

实用性标签：

<hr width="" siae="" noshade="" color="" align="">

horiaontal：简写hr，表示“水平线”

width/size(控制水平线的宽度和高度)

noshade:用于去掉水平线阴影

color:用于定义水品线的颜色

align:用来调整水平线水平对其方式

<pre> </pre>

preformatted:简写，预格式化的文本，保留了空格和换行

<map name="">

<area herf=" " shape="" coords="">

</map>

map：图像映射

coords:用来定义可点击区域的坐标;与shape配合使用

herf:用来定义热点区域链接的目标地址

shape:用来定义区域的形状

shape="default/rect/circle/poly"

default:所有区域

rect:矩形

circle:圆形

poly:多边形

map name=""(img标签的usemap属性相关联)

使用方法：

<area shape="ciecle" coords="x,y,r">

原点为图上左上角，与数学坐标轴相反

SVG:XML语法的图像格式，全称:Scalable Vector Graphics（可缩放矢量图）

SVG:形状描述，本质比文本文件，体积较小、放大多少倍都不会失帧

使用方法：<svg></svg>

<iframe src="网页路径" width="数字" height="数字" frameborder="0" scrolling="auto"></ifame>

yes

no

ifame作用:用来在一个网页中显示另一个网页。

src：资源的意思，用以引入其他页面

width：宽

height：高

frameborder:框架边框，默认有边框、通常值为0

scrolling:滚动，用来控制是否显示框架的滚动条。(auto:在需要的情况下出现滚动条，yes:一直显示滚动条，no:从不显示滚动条)