HTML CSS_html的行内,内嵌,外部链接方式设置-CSDN博客

本文链接：https://blog.csdn.net/weixin_48696905/article/details/116135522

第一部分 HTML

表单标签

表格标签

伪类选择器

第一部分 HTML

HTML：Hyper Text Markup Language 超文本标记语言

第一章 html结构:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

DOCTYPE html：文档类型 html

lang="en"：language="english"

meta charset="UTF-8"：源编码字符集="utf-8"

html标签：单标签双标签

第二章 HTML基本标签：

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> - <h6> 标题字体从大到小默认加粗

<hr> 标尺线

<p> 段落标签

第三章 <form>表单标签

登陆、注册表格等需要提交的场景用于收集用户数据

action 表单提交路径

method 提交的方式

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<input> 标签

常用type类型：

Text 文本框

Password 密码框

Checkbox 多选框

Radio 单选框

button 按钮

Submit 提交按钮

Reset 重置按钮

File 文件上传

Get请求和post请求

Method的提交方式来源于HTTP协议

表单提交时 默认情况下为 Get请求 method为get时为 Get请求 method为post 时为Post请求

Get请求和Post请求有什么区别？

Post请求提交时路径上没有属性的信息相对安全

Get 请求提交时路径上存在属性的信息不安全

get请求在路径的地址上存在属性值 url的地址是有限制的最大为64kb

什么时候使用get请求什么时候使用post请求？

根据数据性质热数据安全度不重要的数据使用get和post都可以

如果数据的性质需要安全性比较高时那么一定要使用post 在写文件上传的功能时必须是post的提交方式

第四章 img标签

图片格式 jpg png gif

src=" "图片路径设置图片的url数据

alt=" "图片含义提供给搜索引擎搜索的

路径知识：

绝对路径从磁盘出发的路径

相对路径相对于当前文件的路径

/开头表示根目录； ./表示当前目录； ../表示上级目录；

<map> 标签

定义一个客户端图像映射（带有可点击区域的一幅图像）。area 元素可定义图像映射中的区域。
定义某个圆形区域范围：用截图工具找图片某个区域的像素比例如250x167 再除以电脑屏幕缩放比例如本电脑为150%，就是除以1.5，得到167,111, 再定义一个半径比如200
例如：

<img src="./image/2.jpeg" alt="莱茵河" usemap="#first" border="2px">
<map id="first" name="first">
<area shape="circle" coords="167,111,200" href="https://www.baidu.com/"></area>
</map>

在图片中的这个圆形区域内点击一下就会跳转到百度

第五章 a标签

a标签进行页面跳转属于get请求方式

href属性设置跳转的网页地址

target属性设置跳转的目标

<a> 标签的使用：

1.使用a标签进行外部跳转外链接

2.使用a标签跳转到网页的内部锚点

创建锚点和锚链接

1.创建锚点<a name="锚点名称"></a>

2.创建锚链接<a href="#锚点名称">内容</a>

第六章 <table>表格标签

<table> 定义一个表格

<tr>行标签定义表格中的一行一个<tr></tr>表示一行

<td>单元格标签定义表格中的一个单元格一个<td></td>表示一个单元格

第七章列表

1.<ul>无序列表 <li>列表的选项

列表符号: type="circle" 空心圆 type=“disc” 实心圆（默认值） type="square" 方块符

2.<ol>有序列表 <li>列表的选项

列表符号：type="A" A B C D type="a" a b c d type="1" 1 2 3 4 （默认值） type=”I” I II III

3.<dl>定义列表

<dl> 表示定义列表

<dt> 定义的项目

<dd> 定义项目的描述

dd是对dt的解释

< dl>< /dl>用来创建一个普通的列表

< dt>< /dt>用来创建列表中的上层项目

< dd>< /dd>用来创建列表中最下层项目

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

第八章 frameset框架

<frameset> </frameset>用来定义一个框架不能和 <body> 一起使用
rows、cols属性

rows 定义行表示框架有多少行
cols 定义列表示框架有多少列
frame子框架每一个窗口都是一个frame

<frame> 表示框架中的某一个部分单标签

src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）

第九章 XHTML

XHTML 可扩展超文本标记语言

XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本从语法上对html进行更严谨的规范

XHTML 是以 XML 应用的方式定义的 HTML

XML 标签可以用任意单词来进行定义

HTML也可以存在任意的单词的标签默认把他们当成文本标签

DTD的命名规范规范了标签的内容

第十章 HTML5

HTML5 是最新的 HTML 标准

HTML5 拥有新的语义、图形以及多媒体元素

视频和音频

<video> 视频 <audio> 音频

<video src="./video/1.mp4"  controls="controls"></video>

<audio src="./music/1.mp3"  controls="controls"></audio>

第二部分 CSS

CSS：Cascading Style Sheets 层叠样式表

CSS内的注释：/*注释内容*/

CSS 是一种描述 HTML 文档样式的语言

CSS 描述应该如何显示 HTML 元素

第十一章 CSS样式表的语法

CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

盒子名或者标签名{属性:值;}

第十二章 CSS选择符

什么是选择器：css选择器就是要改变样式的对象选择器{属性:值; 属性:值;}

1.标签选择符 以标签命名的选择符页面中所有的标签都是一个选择器

p{
          color:gold;
      }

2.id选择符 通常用于描述一个标签具有唯一的样式标识是 # id选择器唯一

<p id="first">难以忘记初次见你  一双迷人的眼睛</p>

#first{
          color:green;
      }

3. class选择符 通常用于修饰一组或者一系列具有相同样式的标签标识是 . class类选择符可以重复利用

<p class="blue">在我脑海里你的身影  挥散不去</p>

<p class="blue">握你的双手感觉你的温柔</p>

<p class="blue">真的有点透不过气  你的天真 我想珍惜</p>

.blue{
          color:blue;
      }

群组选择器 选择多个元素,以逗号隔开

h1, h2, p {
  text-align: center;
  color: red;
}

通用选择器 选择页面上的所有的 HTML 元素

* {
  text-align: center;
  color: blue;
}

包含选择器 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开

属性选择器 选择包含某一属性的元素

`<a>`伪类选择器

a:link {color:#FF0000;} 未访问的链接（只用于a标签）

a:visited {color:#00FF00;} 已访问的链接（只用于a标签）

a:hover {color:#FF00FF;} 鼠标移动到链接上（可和其他标签结合一起用）

a:active {color:#0000FF;} 选定的链接

伪类选择器的排序：a:link a:visited a:hover a:active 记作lvha

输入伪类选择器（针对表单）

input:focus{color:red;} 键盘输入焦点

其他伪类选择器

p:first-child{color:red;} 第一个p

:before 在元素之前添加内容

:after 在元素之后添加内容

第十三章 CSS的引入方式

1.行内样式

在标签中写入style属性 <h1 style="color:red">情非得已</h1>

2.内嵌样式

当单个页面需要设置样式时，就应该使用内部样式表。

<style type="text/css">
	  p{
	  	color:gold;
	  }

	  #first{
	  	color:green;
	  }

	  .blue{
	  	color:blue;
	  }

	</style>

3.外链样式

当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。

<link rel="stylesheet" type="text/css" href="./css/1.css">

4. 导入样式

是内嵌样式和外链的样式的混合不太常用

<style type="text/css">
     @import url(./css/1.css);

	</style>

样式的优先级

优先级不是固定的 就近原则 离被设置元素越近优先级别越高

行内样式（标签内部) > 内嵌样式 (当前文件中) > 外链样式 (外部文件中) > 导入样式 (外部文件中）

行内样式 > Id选择符 > class选择符 > 标签选择符

第十四章 CSS中几种颜色的表示方法

1.用颜色名表示

2.用十六进制的颜色值表示

3.用rgb(r,g,b)函数表示如：rgb(255,255,0)

4.用rgba(r,g,b,a)函数表示其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明

第十五章 CSS文字文本属性

文字属性

设置字号	font-size:12px
设置字色	color:#000000
设置字体	font-family:Arial,'宋体'
设置行高	line-height：150% line-height：1.5em
设置字体的粗细	font-weight：normal[正常] bold[粗体]

文本属性

设置对象中文本缩进	text-indent：2em 可以为负值
文本水平对齐方式	text-align：left[左] center[中] right[右]
对象中空白处理	white-space：normal[自动换行] pre[换行和空白受保护] nowrap[强制在同一行显示]
文本大小写控制	text-transform：none[正常大小] capitalize[每个单词的第一个字母转换成大写] uppercase[转换成大写] lowercase[转换成小写]
元素的垂直对齐方式	vertical-align：sub[设置文字为下标] super[设置文字为上标] top[把元素的顶端与行中最高元素的顶端对齐] text-botton[把元素的低端与父元素字体的低端对齐]