认识HTNL，CSS

最新推荐文章于 2024-07-11 22:36:37 发布

夹叶

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量386

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/kuang6760599/article/details/105398341

版权

关于前后端分离的一些思考

在没有前后端分离之前，那就是将前后端耦合在一起来进行项目的开发，典型的就是JSP，后端开发人员，通过服务端渲染技术，来实现将数据渲染到页面上，而在以前，互联网服务还不是那么繁荣时，通过JSP等技术还是可以游刃有余，但随着社会信息化程度的加深，前端页面需要呈现的数据便越来越复杂起来，相应的，JSP这种服务端渲染技术便越来越力不从心，无法高效的进行开发，究其根本便是，前端和后端耦合在一起，无法做到像后端一样用工程化，模块化，可复用化等思维来编写，于是，最经典的做法便来了，那就是解耦。

前后端分离以后，便使得，前后端分工更加明确，提高了开发效率，降低了项目成本，易于维护与扩展。

认识HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML网页结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doctype声明

HTML5:
<!DOCTYPE html> 
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

meta

源信息
告诉浏览器，该用什么字符集解析该html文件
<meta charset="UTF-8">
使网页可以自适应在不同的硬件设备上
<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性

核心属性：id、title、style、class…
绝大多数元素都具备的属性
2) 特有属性
某些元素中特有的属性

a标签中的href,target
img标签中的src,width,height

块级元素

作用：搭建网页的结构
特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义

div,h1~h6,p,li等

行级元素

作用：填充网页
特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

span,a,img,strong,b,em,i,sub.sup.d等

认识CSS

HTML添加css三种方式

嵌入在标签内部
集中嵌入在style标签中
将css独立卸载外部css文件中，并且通过link导入进来

	css语法
			选择器 {
				/*规则*/
				color:#ffffff;
				background-color:pink;
			}
			

	css选择器 (jQuery选择器)
		1) 核心选择器
			用法：选择较大范围
			1. 标签（元素）选择器
				div {}
				h1 {}
			2. id选择器
				#one {}
				<div id="one">one</div>
				<div id="two">two</div>
			3. class选择器
				.first {}
				<div id="one" class="first">one</div>
				<div id="two" class="first">two</div>
				<div id="three" class="first">one</div>
				<div id="four" class="second">two</div>
				<p id="five" class="first">p</div>
			4. 并且选择器
				div.first {}
				p#five {}
			5. 或者选择器
				div,.first {}
			6. 普遍选择器
				* 	
		2) 层次选择器【一般不超过5层】
			1. 子代选择器
				.top_nav > ul > li
				选中class为top_nav的元素的直接后代ul元素的直接后代li元素
			2. 后代选择器
				.top_nav li				
			3. 下一个兄弟选择器
				.top_nav li + *
			4. 之后所有兄弟选择器
				.top_nav li ~ *
		3) 过滤器
			对已经选择到的元素进行过滤
			1. 属性过滤器
				selector[name]	已选择到的元素具有name属性
				selector[name=v]	已选择到的元素具有name属性，并且name属性的值为v
				selector[name^=v]	已选择到的元素具有name属性，并且name属性的值以'v'开头
				selector[name$=v]	已选择到的元素具有name属性，并且name属性的值以'v'结尾
				selector[name*=v]	已选择到的元素具有name属性，并且name属性的值中包含了'v'
			2. 伪类过滤器
				以:开头的
				selector:first-child 	过滤出已选择元素中的是第一个孩子的元素
				selector:last-child 	
				selector:nth-child(2)
				selector:nth-child(even)
				selector:nth-child(odd)
				selector:nth-child(3n+1)
				selector:only-child
				selector:not(selector)
				...
				selector:hover
				selector:active
				selector:visited
				selector:focus
			3. 伪元素过滤器
				可以产生出来一个虚拟元素（行内元素）
				以::开头的
				div::before {

				}
				div::after {

				}
				<div>
					::before
					<p>one</p>
					<p>two</p>
					::after
				</div>

夹叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识HTNL，CSS

关于前后端分离的一些思考在没有前后端分离之前，那就是将前后端耦合在一起来进行项目的开发，典型的就是JSP，后端开发人员，通过服务端渲染技术，来实现将数据渲染到页面上，而在以前，互联网服务还不是那么繁荣时，通过JSP等技术还是可以游刃有余，但随着社会信息化程度的加深，前端页面需要呈现的数据便越来越复杂起来，相应的，JSP这种服务端渲染技术便越来越力不从心，无法高效的进行开发，究其根本便是，前端和后...
复制链接

扫一扫