您的位置: 首页  >  文章  >  HTML/CSS/JS 学习笔记

HTML/CSS/JS 学习笔记

分类: 文章 • 2022-10-09 18:55:46

HTML/CSS/JS 学习笔记


1 HTML

1.1 标签

块状元素：

  1. 每个块状元素都从新的一行开始，并且其后的元素也另起一行。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下，和父容器的宽度一致。

内联元素：

  1. 和其他元素都在一行上；
  2. 元素的高度、宽度及顶部和底部边距不可设置；
  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素：

  1. 和其他元素都在一行上；
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

1.1.1 块状元素

<address> 联系地址信息

<blockquote> 引用，长文本

<caption> 表格标题

<div> 为网页划分独立的版块，起容器的作用

<dl>

<form> 表单

<h1>…<h6> h1-h6 各级标题

<hr /> 分割线

<li> 列表（内部）

<ol> 有序列表

<p> 段落

<pre> 格式化文本（多行代码）

<table> 表格

<tbody> 包含行的内容下载完优先显示，用其分段，可以一部分一部分地显示。

<tfooter>

<thead>

<ul> 无序列表。

1.1.2 内联元素

<a> 超链接

<br /> 换行

<code> 单行代码

<cite>

<em> 斜体

<i>

<label> 标签

<option> 下拉列表框-列表

<q> 引用，短文本

<select> 下拉列表框

<span> 设置单独式样

<strong> 粗体

<td> 表格的一个单元格

<th> 表格的头部的一个单元格，表格表头

<tr> 表格的一行

<var>

1.1.3 内联块状元素

<img> 图片

<input> 输入框

<textarea> 多行输入域

1.1.4 转义字符

显示结果 描述 字符
  空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;

更多转义字符：https://blog.csdn.net/vola9527/article/details/69948411

1.2 标签属性

id 标签名称，唯一标识

summary 表格摘要，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

<a>: href title target

  1. href 目标网址
  2. title 鼠标滑过显示的文本
  3. target="_blank" 在新窗口中打开
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
  1. mail功能：
    HTML/CSS/JS 学习笔记
    注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
    HTML/CSS/JS 学习笔记

<form>: action method

  1. action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
  2. method 数据传送的方式（get/post）。

<img>: src alt title

  1. src 标识图像的位置。
  2. alt 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。
  3. title 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
  4. 图像可以是GIF，PNG，JPEG格式的图像文件。
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

<input>: type name value

  1. type

    当type="text"时，输入框为文本输入框。

    当type="password"时, 输入框为密码输入框。

    当type="radio"时，控件为单选框。同一组的单选按钮，name 取值要一致。

    当type="checkbox"时，控件为复选框。

    当type="submit"时，控件为提交按钮。

    当type="reset"时，控件为重置按钮。

  2. name 为文本框命名，以备后台程序ASP 、PHP使用。

  3. value 为文本输入框设置默认值、提交数据到服务器的值（后台程序PHP使用）。

  4. checked 当设置checked="checked"时，该选项被默认选中

<label>: for

  1. <label>标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在<label>标签内点击文本，就会触发此控件。就是说，当用户单击选中该<label>标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该<label>标签相关连的表单控件上）。
<label for="控件id名称">	/*标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。*/

<option>: value selected

  1. selected=“selected” 该选项默认选中
<option value="提交值">选项（显示的值）</option>

<select>: multiple

  1. multiple=“multiple” 多选

<textarea>: cols rows

  1. cols 多行输入域的列数。
  2. rows 多行输入域的行数。
  3. 在<textarea></textarea>标签之间可以输入默认值。

2 CSS

层叠样式表 (Cascading Style Sheets)

2.1 结构

2.1.1 外结构

分类：内联式、嵌入式、外部式（按CSS 样式代码插入的形式来分类）

  • 优先级（相同权值）：内联式 > 嵌入式、外部式
  • <link href=“style.css” …>和<style type=“text/css”>…</style>，在后面的优先度更高。
  1. 内联式：把CSS代码直接写在现有的HTML标签中。
<p style="color:red;font-size:12px">这里文字是红色。</p>
  1. 嵌入式：把CSS样式代码写在<style type=“text/css”></style>标签之间。
<style type="text/css">
	table tr td,th{border:1px solid #000;}	/*表格边框*/
</style>
  1. 外部式（外联式）：把css代码写一个单独的外部文件中，这个CSS样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将CSS样式文件链接到HTML文件内。
/*rel="stylesheet" type="text/css" 是固定写法不可修改。*/
<link href="base.css" rel="stylesheet" type="text/css" />

2.1.2 内结构

使用 /*注释语句*/ 进行注释

形式：
HTML/CSS/JS 学习笔记

类别：

  1. 选择器{样式;}

  2. .类选择器名称{样式;} 使用class="类选择器名称"为标签设置一个类。

  3. #id选择器{样式;} 使用id="id名称"为标签设置id。

    1. id名称是唯一的
      1. <span id=“stressid”> <span id=“stressid”> ×
    2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。
      1. <span class=“stressid bigsizeid”> √
      2. <span id=“stressid bigsizeid”> ×

  4. 选择器>子选择器{样式;} 用于选择指定标签元素的第一代子元素。

/*例子*/
.first>span>span{border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>。

  1. 选择器 包含选择器{样式;} 加入空格，用于选择指定标签元素下的所有后代元素。

  2. * {样式;} 通用选择器，匹配html中所有标签元素。

  3. 选择器:伪类选择器{样式;} 伪类选择符，它允许给HTML不存在的标签（标签的某种状态）设置样式

a:hover{color:red;}	/*为a标签鼠标滑过的状态设置字体颜色变红*/
  1. 选择器,选择器{样式;} 分组选择符 为多个标签元素设置同一个样式

2.2 CSS的性质

  1. 继承性：CSS的某些样式具有继承性，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。但有一些CSS样式是不具有继承性的。如border:1px solid red;
/*具备继承性*/
p{color:red;}	
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

/*不具备继承性*/
p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
  1. 特殊性：同一个元素如果被设置了不同的CSS样式代码，浏览器根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
p{color:red;}
.first{color:green;}
#brave{color:blue;}
<p>一年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*red*/
<p class="first">二年级时，我仍旧是一个<span>胆小</span>的小女孩。</p>	/*green*/
<p class="first" id="brave">三年级时，我是一个<span>非常勇敢</span>的小女孩。</p>	/*blue*/

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

  1. 层叠：同一个元素有多个CSS样式存在且具有相同权重时，会根据这些CSS样式的前后顺序来决定，处于最后面的css样式会被应用。（后面的样式会覆盖前面的样式。）
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*green*/
  1. 重要性：用!important来为某些样式设置最高权值
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*red*/

注意：!important要写在分号的前面

当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。

优先级：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important

2.3 属性

2.3.1 字体

font-size:12px; 字体字号

color:#930; 字体颜色

font-family:“Microsoft Yahei”; 字体

font-weight:bold/normal; 字体加粗/不加粗

font-style:italic; 斜体

text-decoration:underline; 下划线

text-decoration:line-through; 删除线

2.3.2 段落

text-indent:2em; 缩进

line-height:2em; 行间距

letter-spacing:20px; 文字间距

word-spacing:20px; 单词间距

text-align:center/left/right; 文字设置居中/左对齐/右对齐

border:1px solid red; 红框

2.3.3 盒模型

display:block; 将元素转变为块状元素

display:inline; 将元素转变为内联元素

display:inline-block; 将元素转变为内联块状元素

HTML/CSS/JS 学习笔记

3 JS

返回顶部

相关推荐