第二十九天

毒瘤.

已于 2022-04-12 16:14:08 修改

阅读量188

点赞数

文章标签： javascript

于 2022-04-12 16:08:06 首次发布

本文链接：https://blog.csdn.net/qq_64619157/article/details/124116251

版权

本文详细介绍了HTML和CSS的基础知识，包括标题、段落、列表、表格、链接、图片等元素的使用，以及样式设计如字体、颜色、布局和浮动。此外，还讲解了表单元素的类型及其属性，以及CSS的样式声明、选择器、优先级和常见属性。通过学习，读者能掌握构建静态网页的基本技能。

摘要由CSDN通过智能技术生成

HTML,CSS

		标题  标签可定义标题，标题依次递减
			h1-h6
			块级元素
		水平线
			hr  分割线
			属性：
				width  宽度
				align  展示的方式
				center 居中显示
		段落标签
		      p  元素之间留有间隙   块级元素
			 属性：
				align   内容展示的方式
					justify  两端对齐
					left
					right
					center
					列表
	无序列表结构
				<ul>
					<li></li>
					<li></li>
					......
				</ul>
			属性：
				type  设置数据前面标识的类型
			<ol>是有序
		div    默认占据一整行
			块级元素
		span
			只展示标签体中的内容
			格式化标签
	 
		font
			字体标签
				属性
					face   设置字体风格
					size   1-7字体大小
					color  字体颜色
			
		pre
			原模原样的展示标签体中的内容
		
		**<sub>**（下标文本）、**<sup>**（上标文本）

a标签
a标签
标签定义超链接，用于从一张页面链接到另一张页面
属性
href: 用于设置需要链接页面的地址
target：设置链接打开的方式
_self: 当前页面打开
_blank：重新打开页面加载内容

			实现锚点
				目标元素 a标签
					可以设置id属性/name属性   <a name="属性值"></a> 
				目标元素 其他标签
					设置id属性               <div id="属性值"></div> 
					
				导航元素 
					a标签
					<a href="#指向id/name的属性值"></a>

		图片标签
			img  元素向网页中嵌入一幅图像。
			属性
				src:  链接图片的地址   在线/本地
				border:  边框
				width    宽度
				height   高度
				alt      当图片加载失败时显示的文本内容
				title    图片的标题（鼠标悬停在图片上显示）
	 table表格
			table  表格标签
			tr     表格的行
			th     表头，居中且字体加粗效果
			td     标准单元格，居左对齐
			
			table属性
				border   边框
				width    宽度
				height   高度
				align    对齐方式
			
			tr属性
				align  单元格内容的水平对齐方式
				valign  垂直方向的对齐方式
				
		style="border-collapse: collapse;"
				设置边框的显示效果
					collapse  合并边框
					separate  分离边框（默认）
						字符实体
			
			空格   &nbsp;
			<      &lt;
			>      &gt;
			©      &copy;

表单

 表单 form 表单用于向服务器传输数据。
 form 元素是块级元素，其前后会产生折行 
 属性
  action: 数据传输的地址
    method: get 默认,数据在地址栏上，安全性差，有缓存，数据量有限 post 数据单独封装在请求体中，安全性较好，无缓存，数据量理论无限 
  name: 表单设置名称 target 请求打开的方式

			表单元素  （表单元素的数据想要提交出去，必须设置name属性）
				input标签
					属性
						type
							text
							password
							radio
							checkbox
							......
						value   设置标签默认值
						checked  默认选中
							checked='checked' 默认选中
						disabled 禁用
							disabled='disabled'
						readonly 只读
							readonly='readonly'
						maxlength 最大长度
							maxlength=值
						placeholder 提示语
							
				button  按钮
					属性
						type
							reset
							button
							submit  提交
							
				文本域
					textarea
						该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。
							
							
				下拉框 （如果下拉框选项没有value值那么会将标签体中的文本内容提交出去）
					select
						属性
							size      显示出来的个数
							multiple  设置多选
					option
						属性
							selected  默认选中
							
						
						
		！如果想使用表单文件上传的功能，必须将请求方式先改为post，设置表单属性 enctype="multipart/form-data"
			二进制表单：enctype="multipart/form-data"	
			普通表单：application/x-www-form-urlencoded

css

		CSS
			层叠样式表
			格式
				选择器名 {
					属性 : 属性值;
					......
				}
				
			注意点：
				1. css声明要以分号;结束，声明以{}括起来
				2. 建议一行书写一个属性
				3. 若值为若干单词，则要给值加引号，如 font-family: "agency fb";

CSS使用

	1.行内样式
				写在具体的标签中，通过style属性将样式设置上去，多个样式分号;隔开
				<div style="background-color: aquamarine;">块级元素hello</div>
			
			2.内部样式
				定义在head标签上的style标签中
				<style type="text/css">
					div{
						background-color: #0000FF;
					}
				</style>
				
			3.外部样式
				在外部创建一个css文件，在head标签上通过link标签引入进来
				<link rel="stylesheet" type="text/css" href="css/style.css"/>
				rel  当前文件与引入文件的关系
				type  引入文件的类型
				href  引入文件的地址
				
		CSS样式的优先级：就近原则

基本选择器

			通用选择器   *
			id选择器     选择设置过指定id属性值的元素   #
			类选择器     选择设置过指定class属性值的元素  .
			元素选择器   选择指定标签
			
			
			CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高
				元素选择器：1
				类选择器：10
				id选择器：100
				内联样式：1000
			
		共有属性id name class

组合选择器由两个选择器组成

			后代选取器(以空格分隔)
			子元素选择器(以大于号分隔）
			相邻兄弟选择器（以加号分隔）
			普通兄弟选择器（以波浪线分隔）

常用属性

			背景
				background-color   设置元素的背景颜色
				background-image   设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
				background-repeat  设置是否及如何重复背景图像
				
			文本
				text-align        文本显示方式
					left、right、center
				color             设置字体颜色
				font-family       设置字体样式  后备机制
				text-indent       设置文本首行缩进
					em一个相对值，例如页面的文本大小为17px,则2em就为17px*4
				text-decoration   设置字体样式
						underline
							对文本添加下划线。
						overline
							对文本添加上划线。 
						line-through
							对文本添加中划线，与HTML中的s和 strike 元素相同。 
						none
							关闭原本应用到元素上的所有装饰。
				font-size         文本大小
				font-style        字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
					normal：文本正常显示；
					italic：文本斜体显示；
					oblique：文本倾斜显示，oblique是将文字强制倾斜。
				font-weight
					字体加粗，该属性设置文本的粗细。  100-900   400正常体    700加粗   
				
			display属性
				display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
				none   不显示元素
				block  将元素设置为块级元素
				inline  将元素设置为行内元素
				
			float  浮动
				float的属性值有none、left、right。