CSS基本语法_html-css

最新推荐文章于 2023-10-26 20:42:45 发布

疯子@123

最新推荐文章于 2023-10-26 20:42:45 发布

阅读量400

点赞数

分类专栏： javaee

本文链接：https://blog.csdn.net/qq_39128254/article/details/108690632

版权

javaee 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

浏览器兼容性问题

标签选择器
id选择器
class选择器语法 .class属性值
复合选择器

前端技术指的就是在用户能够直接访问的内容
一个结构良好的网页由三部分组成：
结构： html标签
表现： css样式
行为： javaScript
1.Html
[1]简介
HTML是HyperText Markup Language的缩写，意为超文本标记语言，是一种用来编写网页的语言。
HTML本身语法非常简单，主要是通过各种标签来定义出一个网页的基本结构
HTML语法本身要求并不严格，即使网页写的非常不标准浏览器也能正确的解析。

[2]基本结构
	<!Doctype html>  
	<html>
		<!-- 不在正文中显示的内容推荐写在head中 -->
		<head>
			<meta charset="utf-8">
			<title>title</title>
		</head>
		<!--在正文中显示的内容写在body中 -->
		<body>
		</body>
	</html> 
	1、html注释：<!-- 不会被html引擎解析显示的内容  -->
	2、标签： 由<>括起来的就是标签
		双标签：由开始和结束标签组成，为了选中一部分内容  <a></a>
		单标签：在开始标签中直接结束  <br/> <img/> <input/>
	3、字符实体：转义字符
		空格： &nbsp;
[3]语法
	1、标签可以嵌套但是不能交叉嵌套
	2、双标签需要正确结束
	3、html不区分大小写，建议小写
	4、属性必须有值，值需要使用 ""或''引起来
	5、浏览器不解析换行和空格	
	
[4]常用标签
	①标题
		<h></h>   h1~h6
	②段落
		<p></p>
	③换行
		<br/>
	④无序列表
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	⑤图片
		<img src="要引入图片的路径"   alt="图片显示失败的提示文本"  title="鼠标悬停时的标题" />
		相对路径： 参考文件所在位置去查找其他资源
			1、引入资源和当前资源在同一级目录
				a.html    src="1.gif"
				1.gif
			2、引入资源在当前资源的下一级目录
				a.html   src="a/1.gif"
				a/1.gif
			3、引入资源在当前资源的上一级目录
				a/a.html   src="../1.gif"
				1.gif
			
	⑥超链接 : 修饰内部文本，点击后可以跳转到href对应的地址 
		<a href="#" target="打开目标页面的方式：默认_self ， _blank:新建标签打开新页面">点我</a>
		
[5]表格：格式化对齐显示数据
	<table border="1" align="left/center/right">
		<tr>
			<td>aa</td>
			<td>bb</td>
			<td>cc</td>
		</tr>
		
		<tr>
			<td>aa1</td>
			<td>bb2</td>
			<td>cc3</td>
		</tr>
	</table>
	table: 创建一个表格
		border：边框线厚度   1代表1像素 
		tr：创建表格的一行
			th:创建一个表头单元格
			td:给表格的行创建一个单元格
				colspan: 跨列合并，同一行的多个单元格合并
				rowspan：跨行合并，多行间同一列单元格进行合并
		
[6]表单：收集用户数据  
	用户名:<input type="text"  name="username1"/><br/>
	<form action=".html" method="post">
		用户名:<input type="text"  name="username"/><br/>
		密码:<input type="password"  name="password"/><br/>
		照片:<input type="file"  name="photo"/><br/>
		性别:男<input type="radio"  name="gender" value="nan"/>女<input type="radio"  name="gender" value="nv"/><br/>
		爱好: 男<input type="checkbox"  name="hobby" value="nan"/>女<input type="checkbox"  name="hobby" value="nv"/><br/>
		下拉选框
			<select name="sel">
				<option value="1">1</option>
				<option>2</option>
				<option>3</option>
			</select>
		<input type="submit" value="注册"/> <input type="reset" value="重置"/>
	</form>
	form标签：创建一个表单
		action属性：表单数据提交的地址
		method属性：表单数据的提交方式    
			默认get， 请求参数在action地址后拼接提交，效率高[url?name1=value1&name2=value2]
			post方式： 请求参数隐式提交，地址栏不可见，效率低 安全
		input标签：创建一个表单项
			placeholder属性： 提示文本
			value属性： 表单项提交数据时提交的参数值就是value值，用户能够输入内容的表单项输入的内容就是value值
				用户不能输入内容的表单项一般我们会设置默认的value值
			name属性： 有name属性的表单项数据才会被收集提交
				多个单选按钮和复选框name属性值相同才是同一组
			type属性：决定表单项的收集数据的类型和样式
				text 文本框
				password 密码框
				checkbox：复选框
				radio：单选按钮
				button：普通按钮
				submit： 提交按钮[点击时会让form标签收集表单内有name属性值的表单项数据提交]
				file： 文件表单项
				hidden： 隐藏表单项
				reset： 重置按钮
[7]DIV和SPAN
	div:  为了选中一块内容进行修饰，除了换行没有其他效果
	span：为了选中一行内的某些内容进行修饰，没有任何效果
[8]实体标签   
	空格： &nbsp;			
	小于号： &lt;
	大于号： &gt;

2.CSS
[1]简介
CSS是Cascading Style Sheets的缩写，层叠样式表的意思主要用来设置网页中元素的样式。
CSS语法也十分简单，主要分为两部分：
①选择器：选中需要设置样式的标签
②声明：具体的样式 {样式名: 样式值;}
CSS语法虽然简单，但是要想真正的掌握CSS还是要花费一定时间的，尤其是布局和各种样式的实现。
作为我们后台工程师来说不需要很深的CSS功底，只需要了解基本语法即可。
[2]基本语法
①编写位置
1) 页面内部
1.1 标签内部不推荐使用
每个标签都提供了style属性，style属性中可以直接编写css代码
1.2 head内部的style标签中书写css样式：
html页面由html引擎解析，不能解析css语法内容，html提供了style标签，当html引擎解析到style标签时会将内部的css代码交给css引擎

		2) 页面外部     使用最多
			2.1 创建一个css样式文件[文件内部编写css样式]
			2.2 在需要使用css样式的文件中通过link标签引入样式文件
				<link  rel="styleSheet"  type="text/css"  href="css文件的路径"   ></link>
		
	②选择器  必须掌握
		1) 基本选择器  选中想要设置样式标签的语法
			标签选择器：根据标签名选中一组标签
				标签名 声明
			id选择器：根据id值查找一个标签
				#id值  声明
			class选择器：根据class属性值查找一类标签 
				.class值 声明
			选择所有：
				* 声明
			复合选择器：	
				h2 , p , #pId , .cla 声明

		2) 常用样式
			字体大小： font-size: 20px;
			字体颜色： color: #00000;
			文本对齐方式： text-align: center/left/right
			背景颜色： background-color: gray;
			设置标签的隐藏显示： display : none/block
				
[3]颜色
	> 在CSS中我们使用RGB值来表示颜色。
	> RGB值可以写成一个三组两位十六进制数字，这个数字要求以#号开头
	> #红色绿色蓝色
	> 000000 - ffffff
		黑色： #000000
		白色：#ffffff
		红色：#ff0000