HTML,CSS,JS学习笔记
⽹页构成：HTML，CSS, JS,
HTML是⼀种超⽂本标记语⾔。
HTML基础
HTML标签：成对出现
HTML⽂档（也叫⽹页）：HTML标签+纯⽂本
基本结构
HTML 标题：HTML 标题（Heading）是通过 <h1> - <h6> 等标签进⾏定义的。
HTML 段落：HTML 段落是通过 <p> 标签进⾏定义的。
HTML 链接：HTML 链接是通过 <a> 标签进⾏定义的。（在 href 属性中指定链接的地址。）
HTML 图像：HTML 图像是通过 <img> 标签进⾏定义的。（图像的名称和尺⼨是以属性的形式提供的。）HTML元素
HTML ⽂档是由 HTML 元素定义的
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML属性
HTML 标签可以拥有属性，属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常⽤的，不过使⽤单引号也没有问题。在某些个别的情况下，⽐如属性值本⾝就含有双引号，那么您必须使⽤单引号
HTML标题
浏览器会⾃动地在标题的前后添加空⾏。
默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏，⽐如段落、标题元素前后。(<p> 是块级元素)
<hr /> 标签在 HTML 页⾯中创建⽔平线。
HTML注释：例：<!-- This is a comment -->    <! 内容 >
HTML 折⾏：
如果您希望在不产⽣⼀个新段落的情况下进⾏换⾏（新⾏），请使⽤ 标签( 元素是⼀个空的 HTML 元
素。由于关闭标签没有任何意义，因此它没有结束标签。)：
<p>This is<br />a para<br />graph with line breaks</p>
HTML输出
⽆法通过在 HTML 代码中添加额外的空格或换⾏来改变输出的效果。
当显⽰页⾯时，浏览器会移除源代码中多余的空格和空⾏。所有连续的空格或空⾏都会被算作⼀个空格。需要注意的是，HTML 代码中的所有连续的空⾏（换⾏）也被显⽰为⼀个空格。
HTML样式
style属性
style 属性的作⽤：提供了⼀种改变所有 HTML 元素的样式的通⽤⽅法。
样式实例
background-color 属性为元素定义了背景颜⾊，font-family、color 以及 font-size 属性分别定义元素中⽂本的字体系列、颜⾊和字体尺⼨，text-align 属性规定了元素中⽂本的⽔平对齐⽅式。pre标签很适
合显⽰计算机代码，可以保留空格和换⾏。
div span标签(重点)
div span 是没有语义的 是我们⽹页布局主要的2个盒⼦ css+div
div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合⽹页。
跨度，跨距；范围
语法格式：
<div> 这是头部 </div>    <span>今⽇价格</span>
⽂本格式化标签(熟记)
在⽹页中，有时需要为⽂字设置粗体、斜体或下划线效果，这时就需要⽤到HTML中的⽂本格式化标签，使⽂字以特殊的⽅式显⽰。
b i s u 只有使⽤ 没有 强调的意思 strong em del ins 语义更强烈
标签属性
使⽤HTML制作⽹页时，如果想让HTML标签提供更多的信息，可以使⽤HTML标签的属性加以设置。其基本语法格式如下：
<；标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
在上⾯的语法中，
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后⾯。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
图像标签img（重点）
要想在⽹页中显⽰图像就需要使⽤图像标签，其基本语法格式如下：
<img src="图⽚路径" width="设置图⽚宽度" height="设置图⽚⾼度" border="边框" alt="图⽚"/>
<img/>标签常见属性详解
1. src 属性作⽤：指定我们要加载的图⽚的路径和图⽚的名称以及图⽚格式
2. width 属性作⽤：指定图⽚的宽度，单位 px、em、cm、mm
3. height 属性作⽤：指定图⽚的⾼度，单位 px、em、cm、mm
4. border 属性作⽤：指定图标的边框宽度，单位 px、em、cm、mm
5. alt 属性作⽤：
6. 当⽹页上的图⽚被加载完成后，⿏标移动到上⾯去，会显⽰这个图⽚指定的属性⽂字作⽤
7. 如果图像没有下载或者加载失败，会⽤⽂字来代替图像显⽰作⽤
8. 搜索引擎可以通过这个属性的⽂字来抓取图⽚
链接标签（重点）
在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转⽬标" target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤
target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。
注意：
2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href="index.html"> ⾸页 </a >
3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂
时为⼀个空链接。
4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。
单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转⽬标" target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤
target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。
注意：
2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href="index.html"> ⾸页 </a >
3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。
4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。
锚点
有时我们在浏览⽹页时会发现，会有点击返回顶部的按键。这样的效果⽤锚点标签就能做到。锚点就是点击使⽤户跳到⽂档的某个部分。
<a href="#位置名"> </a>
<a name="位置名"> </a>
如代码例⼦：
<a href="#map">跳转</a>
<p id="map">代码代码</p>
HTML表格
HTML表格由 <table> 标签来定义。每个表格均有若⼲⾏（由 <tr> 标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等
⽆序列表是⼀个项⽬的列表，此列项⽬使⽤粗体圆点（典型的⼩⿊圆圈）进⾏标记。⽆序列表使⽤ <ul> 标签。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表也是⼀列项⽬，列表项⽬使⽤数字进⾏标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使⽤数字来标记。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
HTML表单
<form> 标签⽤于为⽤户输⼊创建 HTML 表单。
表单元素:
<input type=""/> 根据不同的 type 属性，可以变化为多种形态。
<select></select> 定义下拉列表。
<textarea></textarea> 定义多⾏输⼊字段（⽂本域）。
<button></button> 定义可点击的按钮。
CSS基础知识
CSS选择器
1、标签名选择器：如：p{}，即直接使⽤HTML标签作为选择器，在实际的应⽤中，我们习惯⽤它设置标签的⼀些默认属性或者和后代选择器⼀起使⽤。
2、类选择器：选择class命名的元素 以.开头，如  .polaris();
3、ID选择器：id命名的元素 以 # 开头， 如：#polaris()；在同⼀个HTML⽂档中不能出现两个相同的ID名称，也就是说ID具有唯⼀性。
4、后代选择器：如 .polaris  span  img{}，后代选择器实际上是使⽤多个选择器加上中间的空格来到具体的要控制的标签。
5、组选择器：.polaris ， span ， img{}，实际上是对CSS的⼀种简化写法，是把具有相同CSS样式的不同选择器放在⼀起，减少代码量。
CSS样式在浏览器中被解析的先后顺序：
(1) CSS不同引⼊⽅式的优先级：标签内嵌样式 > 头部书写样式 > 外部引⽤样式 > 浏览器默认样式。
(2) CSS选择器的优先级：id > class > tagname.
(3) 多个选择器混⽤时的优先级：例⼦.a  .b  c{}和.a  c{}，它们指向的⽬标都是c，但是前者的优先级⾼于后者
⽂本字体设置:
color:red; ⽂字颜⾊
font-size:12px; ⽂字⼤⼩
font-weight:“bold” ⽂字粗细(bold/normal)
font-family:“宋体” ⽂字字体
font-variant:small-caps⼩写字母以⼤写字母显⽰
text-align:center; ⽂本对齐(right/left/center)
line-height:10px; ⾏间距(可通过它实现⽂本的垂直居中)
text-indent:20px; ⾸⾏缩进
text-decoration:none;
⽂本线(none/underline/overline/line-through)
letter-spacing: 字间距
盒模型css表格样式
完整的盒模型是由content（内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。
border属性：
语法：border-top  |  left  |  bottom  |  right ；
padding属性：
语法：
padding-top  |  left  |  bottom  |  right:  px |  em  |百分⽐；
margin属性：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。