HTML+CSS备忘point

最新推荐文章于 2024-05-20 23:40:22 发布

暴躁老砚

最新推荐文章于 2024-05-20 23:40:22 发布

阅读量441

点赞数

分类专栏：前端文章标签： html5 css

本文链接：https://blog.csdn.net/Yann_nnaY/article/details/109165339

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（一）HTML基础

超文本标记语言。不是编程语言，不做逻辑处理。作用：告诉浏览器如何构造网页。
<p>……</p> Opening/Closing Tag

html页面的基础格式

<!DOCTYPE html>
<html>
  <head>……</head>
  <body>……</body>
</html>

<!DOCTYPE html>用来解释文档的类型
<head>中通常存放不被渲染在主题页面上的东西，如<title>、搜索引擎关键字等
<body>中存放想给用户看到的信息，如<h1>标题文字、<p>段落

块级元素&内联元素

块级元素：在页面以块的形式展现，出现在新的一行，占据页面全部宽度
如<div>、<h1>、<p>
内联元素：通常在块级元素内，不会导致文本换行，只占必要的部分宽度
如<a>超链接、<img>、<em>文字斜体、<strong>文字加粗等

常用元素

0.注释符号<!-- 内容--!>
1.<h1>到<h6>：标题文字，字号从大到小
2.<p>：可以在Tag中打“lorem10”，则自动生成10个词的占位文字

 <p><abbr title=“xxx”>MIT</abbr>is ……</p>：<abbr>

用来给文字做注解，鼠标放上去会出现title里的注释文字

<p><cite>XXXX……</cite> by Yan</p>：<cite>

用来加引用名人名言的效果

3.<a href="链接" target="_blank">……</a>：超链接，target表示浏览器在新窗口打开
4.<br>换行符，<hr>分割线
5.<img src="……" alt="……" style="width:100vw">
插入图片，src指定source，alt指定当该图片无法显示时的提示文字。100vw表示占浏览器百分百宽度。
6.<blockquote>：引用他人文字的效果
7.Lists：无序列表<ul>，有序列表<ol>，表格<table>，表单<form>

无序列表——传统list显示

<ul>
  <li>list item1</li> *当需要批量建立时，打li*5，会自动生成5个
</ul>

在这里插入图片描述

有序列表——行开头带项目序号的list

<ol>
  <li>list item1</li>
</ol>

8.表格——thead+tr+th表头，tbody+tr+td表内容

<table>
  <thead>
    <tr>
	   <th>表头内容</th>
	</tr>
  </thead>
  <tbody>
    <tr>
	  <td>数据内容</td>
	</tr>
  </tbody>
</table>

9.表单：action用来指定后续执行逻辑操作的文件（运行后会自动搜索该文件），method指定执行的请求类别。

<form action="form.js" method=“POST”>
  <div>
    <label>姓名：</label>
	<input type="text" name="name" placeholder=“Enter Your Name”>
	<input type=“submit” name=“submit” value=“Submit”>
  </div>
</form>

10.*<input>是输入框，placeholder指定的会作为输入框内灰色提示文字。type包括“text”、“email”、“submit”等
11.!important的作用：提升CSS优先级。如：

#Box {
      color:red !important;
      color:blue;
 }
 //显示出的字体颜色会时红色（第一行优先级为1，不会被第二行覆盖）
 //IE浏览器不识别！important

参考链接：css中!important的作用

iframe

iframe元素可定义内联的子窗口（框架），作用是文档中的文档，或者浮动的框架(FRAME)。用于在网页内显示网页。
语法：<iframe src="URL"></iframe>
//URL 指向隔离页面的位置。

设置高度和宽度：

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
//属性值的默认单位是像素，也可用百分比来设定（比如 "80%"）

删除边框

 <iframe src="demo_iframe.htm" frameborder="0"></iframe>
 //frameborder属性规定是否显示iframe 周围的边框。设置为 "0" 即可移除边框

使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
//链接的 target 属性必须引用 iframe 的 name 属性。

效果参考：https://www.w3school.com.cn/html/html_iframe.asp

HTML DOM getElementById() 方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和getElementsByTagName()。
不过，如果需要查找文档中的一个特定元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>

document.getElementById().innerHTML

设置或获取某一节点里面所包含的HTML代码，

例子：

<div id="QQ">我是QQ的InnerHTML, <strong>这也是innerHTML<strong></div>
<script>
// 弹出节点zhi"QQ"的InnerHTML
alert(document.getElementById("QQ").innerHTML);
// 改变节点“QQ”的InnerHTML
document.getElementById("QQ").innerHTML = "哈哈，我dao变了吧";
</script>

HTTP方法

HTTP（超文本传输协议）
设计目的：保证客户端与服务器之间的通信。
工作方式：客户端与服务器之间的请求-应答协议。

最常用的两种 HTTP 方法：GET 和 POST。
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET方法

/test/demo_form.php?name1=value1&name2=value2

查询字符串（名称/值对）在请求的 URL 中发送

GET 请求可被缓存；可被收藏为书签；
URL长度最大为2048个字符，只允许使用ASCII字符；
参数保留在浏览器历史；数据包含在URL中对所有人可见，因此安全性较差

POST方法

POST /test/demo_form.php HTTP/1.1
Host: runoob.com
name1=value1&name2=value2

查询字符串（名称/值对）在请求的 HTTP 消息主体中发送

POST请求不能缓存，不可收藏为书签；
URL长度无限制，使用数据类型无限制；
参数不会保留在浏览器历史；数据不会显示在URL中，因此比Get安全

归纳GET 和 POST方法的区别：
1、主要作用：Get 用来从服务器上获得数据； Post 用来向服务器传递数据。
2、data格式：Get 将表单中数据的按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL。
3、发送的数据量：GET只能发送有限数量的数据，因为数据是在 URL中发送的；POST可以发送大量的数据，因为数据是在正文主体中发送的。
4、安全性：GET发送的数据不受保护，因为数据在 URL栏中公开，增加了漏洞和黑客攻击的风险； POST发送的数据是安全的，因为数据未在 URL栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
5、加入书签中：GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而POST 查询的结果无法加入书签中。
6、编码：在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符；在表单提交时，POST方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
7、可变大小：GET方法中的可变大小约为 2000 个字符；POST方法最多允许 8 Mb 的可变大小。 6、缓存 GET的数据是可缓存的，而 POST的数据是无法缓存的。

其他HTTP请求方法
HEAD：与GET相同，但只返回http报头，不返回文档主体
PUT：上传指定的 URI 表示
DELETE：删除指定资源
OPTIONS：返回服务器支持的http方法
CONNECT：把请求连接转换到透明的 TCP/IP 通道

（二）CSS

Cascading Stylesheets层叠样式表。不是编程语言，作用：告诉浏览器如何指定样式、布局等。
通常和html/xml等结合工作。

添加CSS的三种方法

外部样式表：CSS保存在.css文件中，在html里使用<link>调用（使用率最高的一种）

 <link rel="stylesheet" href="xxx">

内部样式表：将CSS放在Html开头的<style>里
内联样式：在Html元素的styie属性中添加，仅影响一个元素（不推荐使用）

基础用法

<p>我是内容</p> 给tag内文字加颜色—— p{color：red}；
上文中p：选择器selector，对应html中的
标签；color：属性Property；red：属性值value
CSS选择器的3种选择方式

 p{color:red}; 
  //直接指向<p>标签，如button{……};会应用在所有button上
 .p1{color:red};
   //通过class类选择标签，只作用于标注class=“p1”的部分，可影响多个标签
   如<p class="p1">xxx</p>
 #para1{color:red};
   //通过id选择标签。一般在CSS文件中是唯一的
   如<p class="p1" id="para1">xxx</p>
 //.box1 h1{……}针对的就是class=“box1”下的<h1>标签

常用到的CSS

（1）颜色表示

关键词：red；
十六进制值：#ff0000；
RGB：rgb(255,0,0)；rgbA(255,0,0,0.5)；
RGB三原色，RGBA最后一位设置透明度。0表示完全透明
HSL：hsl(0,100%,50%)，HSLA-hsl(0,100%,50%,0.5)；
HSL色相、饱和度、明度，H色相范围值从0°到360°，饱和度&名明度范围值0到100％。

（2）字体表示

font-family：字体1,字体2,sans-serif;
font-family：“字体”,serif;
font-size：16px;
font-weight：bold;
font:bold 16px 字体1，字体2，sans-serif;
*写入两个字体是表明优先度（找不到第一个会找第二个）；serif和sans-serif：衬线体&无衬线体（正常字体）；字体名由多个单词组成时外面要加双引号
*常用的文本颜色#555555
text-decoration:underline; 下划线
text-align:center; 文字对齐方式
text-transform:none|capitalize|uppercase|lowercase|lowercase; 控制文本的大小写：默认|单词以大写字母开头|全大写|全小写|从父元素继承 text-transform 属性的值
letter-spacing:1em; 字间距、word-spacing:1em; 词间距、line-height:1.5em; 行高

（3）盒子模型/框模型

在这里插入图片描述

contecnt部分：一个段落，内容填充（满填充格式）
padding部分：内边距（content和border之间的部分）

//基础用法
p{
  margin:5px 10px 5px 10px;  上右下左（顺时针）
  margin:5px 10px 5px;  上边距、右左边距、下边距
  margin:5px 10px;  上下边距5px、右左边距10px
  margin:5px;  4 个内边距都是 5px
}
//JavaScript 语法：object.style.padding="10px 5px"

border部分：边框

//基础用法
p{
  border:5px solid red;  设置所有边框样式。分别为：border-width/style/color 。可省略其中的某个值，如border:solid #ff0000;
  border-top:/bottom:/left:/right: 用法同上
  border-radius:10px;  //加圆角边框
  border-bottom-left-radius:2em;  左下角圆角边框
  outline:#00FF00 dotted thick; 设置所有轮廓属性。分别为：outline-color /style/width。
}
 //JS 语法：object.style.border="3px solid blue"
 //outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用（轮廓线不会占据空间，也不一定是矩形）

margin部分：外边距（和外部元素接触的部分）

//margin的使用方法和padding相同

当两个盒子并列摆放，会取两个外边距中最大的一个作为二者间的边距————外边距合并

border-left:5px blue dotted; 
boder-top-width:8px;
border-radius:10px;  //加圆角

实例：

<div class="list">
    <ul>
        <li>List 1</li>
		<li>List 2</li>
    </ul>
<div>

.list li{
    list-style:square;  前端项目符号变成方块（默认圆形）
    list-style-image:url('../image/img01');  前端项目符号变成图片
}

（4）按钮

我是一个按钮

button{
    background-color:#444444;
	color:#fff;  字体颜色
}
  //鼠标经过状态:
button:hover{  
    background-color:red;
}
  //按下状态：
button：active{	
    background-color:red;
}

（5）超链接

<ul>
    <li><a herf="#">我是一个链接</a></li>
</ul>

  //去掉下划线
a{
    text-docoration:none;  
}
a:hover{
    color:green;
}
  //访问过该链接
a:visited{
    color:red;	
}

（6）浮动float

*当三个div并列——

<div class="block">
    <p>我是第一框</p>
</div>
<div class="block">
    <p>我是第二框</p>
</div>
<div class="block">
    <p>我是第三框</p>
</div>

.block{
	float:left;
	width:33.3%;
}
  //加入border
.block{
	float:left;
	width:33.3%;
	border：1px solid #ccc;
	box-sizing:border-box;
}
//当加入border属性后，三个box不再并列，因为边框占据了一定位置，此时需要用`box-sizing`来声明这是以一个带边框的box，声明后box会恢复并列排版

*当两个box并列——

<div id="main-block">这是主框</div>
<div id="sidebar">这是侧边框</div>

#main-block{
    float:left;
	width:70%;
}
#main-block{
    float:left;
	width:70%;
}
#sidebar{
    float:right;
	width:30%;
}

*注意：使用float后，需要用clear来清除浮动（重制某个元素的浮动情况）
使用方法：

<div id="sidebar">……</div>
<div class="clearfix"></div>

.clearfix{
    clear:clear: none | left | right | both;//默认情况为none
}

*假设一行内有两个元素div1和div2，并都设置为float: right，此时2在1的右边紧挨着。
这时候如果在两个元素中间放置一个clearfix标签，并设置该标签css 为clear: both。意为该元素两边都不许有浮动。
此时div2被clearfix间隔开，转移到了div1的下面。

（7）选择器的进阶使用

<div class="list2">
    <ul>
        <li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
		<li>List 5</li>
    </ul>
<div>

//指定偶数行样式
.list2 li:nth-child(even){   
     color:red;
}
.list2 li:first-child{……}   //指定首行样式
.list2 li:nth-child(3){……}  //指定特定行（第3行）样式

（8）position定位方式

static 静态定位。所有元素默认的定位方式，上下左右等
relative 相对定位
absolute 绝对定位。通常和relative一起使用
fixed 固定定位。相对于视窗做定位，如导航栏始终定位在顶部
sticky 动态固定定位

<div class="newbox">……</div>
.newbox{
    position:relative;  根据当前位置（未偏移前的位置）进行偏移
	top:30px;
}

.newbox{
    position:absolute;  在没有上下文relative时，根据当前视窗页面进行偏移
	top:30px;  
}

实例1：

<div class="position-box“>
    <h1>heading1</h1>
	<h2>heading2</h2>
</div>

.position-box{
    width:500px;
	position:relative;  //这里必须写，否则后续的h1、h2会针对整个视窗偏移
}
.position-box h1{
    position:absolute;  //针对父容器box偏移50px
	top:50px;
}
.position-box h2{
    position:absolute;
	right:30px;
}

实例2：

<buttion id="fixed-button">Button</button>

#fixed-button{
    position:fixed;
	right:0;
	bottom:0;
}

——显示效果：不管页面怎么滚动，button始终固定在页面右下角位置

（9）display网页布局

参考视频来源：指路b站1