javascript小白菜
javascript小白菜

HTML CSS整理笔记

HTML CSS整理笔记

本文转载于链接：https://blog.csdn.net/Lin16819/article/details/102759862

点击链接后退页面：
<a href="javascript:history.go(-1)">回到上一个网页a>

——修改placeholder提示的样式：
1.除IE外通用写法
 类名或标签名::placeholder {color: red;}
2.加兼容前缀写法

css超出一行显示省略号：
给定宽度(width:100px)、
超出隐藏（overflow:hidden）、
强制在同一行显示（white-space: nowrap）、
省略号（text-overflow:ellipsis）

——常见字体单位——
1.em
相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸）

2.rem
r即root，始终相对于根节点html的font-size进行缩放。（根据祖先html）

3.vh
vh指当前屏幕可见高度的1%，即 height:100vh == height:100%;
区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。但设置height:100vh，该元素会被撑开和屏幕高度一致。

4.vw
Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%，
对比：
width:100%; 设置元素宽度占父元素的宽度100%。
width:100vw; 相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。

从这里往下是分类整理

——1.HTML5基础——
5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。
6.DOCTYPE html>必须位于HTML文档第一行。
7.<meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式：
  (1)表示文档内容类型、字符串编码信息 如：<meta charset="UTF-8">
  (2)为搜索引擎定义关键词: 
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
  (3)为网页定义描述内容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">
  (4)定义网页作者:    
<meta name="author" content="Hege Refsnes">
  (5)每30秒中刷新当前页面:   
<meta http-equiv="refresh" content="30">

8.字体样式标签：<strong>字体变粗、<em>和<i>都有斜体的效果，区别<em>表示对内容的强调
9.注释 
10.常用转义字符：
  //空格
> //大于号>
< //小于号<
"; //双引号"
© //版本符号

11.常用图片格式：JPG、GIF、PNG、BMP
12.图片标签，必须要有src和alt属性：
="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
    <a href="链接地址" target="目标打开窗口位置">附连接的文本或图像a>
14.链接地址
    (1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件
如<a href="http://www.baidu.com/index.html">百度a>)、
    (2)相对路径(一般指向本站点内的文件,如<a href="login/login.html">登陆<a>)
    (3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录
15.超链接的应用场合：
    (1)页面间链接：如<a href="login.html" target="_blank">为您跳转到登录页a>
    (2)锚链接：
    先在目标位置B设置标记如：<a name="new">这里是目标位置a>，
    然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A>
    (3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
    如电子邮件链接："mailto:电子邮件地址"

16.元素分类
(1)块元素：如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。
   块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如<strong><a> 显示宽度由自己的内容决定，其他元素可以排在它后面。

16.元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;
(就是同时具备内联元素、块状元素特点，如img、input)

——2 列表、表格、媒体元素——
17.三种列表：
    (1)有序列表<ol><li>
       (2)无序列表<ul><li> ul中只能嵌套li，而li可以嵌套任意标签。
    (3)定义列表<dl><dt><dd> 是标题及列表项的结合。
18.表格基本结构：单元格、行、列
    (1)<table><tr><th><td>
    (2)HTML5中已废除table的border属性，用css控制边框宽度。
    (3)跨列(横跨)：<td colspan="所跨的列数">内容td>
       跨行(竖跨)：<td rowspan="所跨行数">内容td>，两者都要删除被合并的其他单元格。
    (4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

19.视频元素：
    (1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
<video src="视频路径" controls="controls">你的浏览器不支持video标签video>
    (2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：
    <video controls>
        <source src="video/video.webm" />
        <source src="video/video.mp4" />你的浏览器不支持video标签
    <video>
20.音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容)：
    header(头部)、footer(脚部)、
    section(独立区域)、article(独立文章内容)、
    aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.<iframe>框架:方便在页面中引用站外的页面内容。
   <iframe name="此框架的标识名" src="引用的页面地址">iframe>
23.<iframe>和锚链接的结合：使锚链接的内容在iframe框架中打开
    <iframe name="mainFrame" src="框架引用的页面地址" />
    <a href="链接路径" target="mainFrame">点击在框架中打开a>

——3 表单——
24.表单标签form：
<form method="post" action="login.html" enctype="text/plain">
 表单内容
form>
    (1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
    (2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。
    (3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain     空格转换为加号+，但不对特殊字符编码。

24.表单元素：
    (1)表单元素<input>标签的属性：
    type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
    (2)列表框<select><option>标签：
    <select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
    (3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>
    (4)多行文本域：不能用value属性赋初始值
    <textarea name="标识名" cols="显示的列数" rows="显示的行数">
        自我评价    
    textarea>
    (5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
    <input type="number" name="num" min="0" max="100" step="10"/>
    (6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
    <input type="range" name="range" min="0" max="100" step="10"/>
    (7)search搜索框:在任意页面中用于输入搜索关键词的文本框
    <input type="search" name="sousuo" />
    (8)文件域：多用于文件上传
    <input type="file" name="files"/>
    <input type="submit" name="upfiles" value="上传"/>
    (9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
    (10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
    <input type="hidden" name="userid" value="20"/>
    (11)表单元素 只读属性readonly、禁用disabled
    (12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
    (13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
    <label for="female">女label>
    <input type="radio" name="sex" id="female" />

24.HTML5表单新标签
<form>        供用户输入的表单
<input>    输入域
<textarea>    文本域 (多行输入)
<label>    定义 <input> 元素的标签，一般为输入标题
<fieldset>    定义一组相关的表单元素，并使用外框包含起来
<legend>    定义 <fieldset> 元素的标题
<select>    下拉选项列表
<optgroup>    选项组
<option>    下拉列表中的选项
<button>    点击按钮
<datalist>    指定一个预先定义的输入控件选项列表
<keygen>    定义了表单的密钥对生成器字段
<output>    计算结果

25.表单验证
    (1)好处：减轻服务器的压力；保证数据的可行性和安全性。
    (2)placeholder:为文本框提示用户输入
    <input type="text" name="name" placeholder="请输入你的姓名"/>
    (3)required：规定文本框不能为空
    <input type="email" name="email" required/>
    (4)pattern：输入的内容必须符合正则表达式自定义的规则
    <input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字

——4 CSS3基础——
26.CSS：Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet，用于设计网页风格。
27.CSS3的基本语法结构：
    (1)CSS中注释为 /*内容*/
    (2)CSS规则由选择器、声明组成。
    (3)声明必须放在大括号{}中，声明可以是一或多条。
    (4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如
<style type="text/css">
    h1{
       font-size : 12px;
       color : red;        
    }
style>

28.在HTML中引入CSS样式的方式：
    (1)行内样式：直接在标签中用style属性设置CSS 如<p style="font-size:10px;">字体大小p>
    (2)内部样式表：把css写在head的<style>中，规范化应为