HTML和CSS知识汇总
文章目录
一、HTML 简介
Hyper TextMarkupLanguage (超文本标记语言) 简写:HTML HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,
通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容
1、HTML 标签介绍
1.标签的格式: <标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性:bgcolor="red" 可以修改简单的样式效果
ii. 事件属性: onclick="alert('你好!');" 可以直接设置事件响应后的代码。
4.标签又分为,单标签和双标签。
i. 单标签格式: <标签名 />
ii. 双标签格式: <标签名> ...封装的数据...</标签名>
br 表示换行 hr表示 水平线
1.2 常用标签
1.2.1 字符表,转换成字符显示在页面上
1.2.2 标题标签
1.2.3 超链接`
标 签 是 超 链 接 href 属 性 设 置 连 接 的 地 址
target 属 性 设 置 哪 个 目 标 进 行 跳 转
_self 表 示 当 前 页 面 ( 默 认 值 )
_blank 表 示 打 开 新 页 面 来 进 行 跳 转
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/> </body>
1.2.4 列表标签
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
1.2.5 img 标签
img
标 签 是 图 片 标 签 , 用 来 显 示 图 片 src 属 性 可 以 设 置 图 片 的 路 径
width 设 置 宽 度
height 设 置 高 度
border 设 置 图 片 边 框 大 小
alt 属 性 设 置 当 指 定 路 径 找 不 到 图 片 时 , 用 来 代 替 显 示 的 文 本 内 容
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
1.2.6 表格标签
table 标签是表格标签
border 设置表格标签
width 设置表格宽度 height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签 th 是表头标签 td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
跨行跨列表格
colspan 属性设置跨列 rowspan 属性设置跨行
1.1 | 1.2 | 1.3 |
---|---|---|
2.1 | 2.2 | 2.3 |
3.1 | 3.2 | 3.3 |
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th> </tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td> </tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td> </tr>
</table>
1.2.6 表单标签
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
form 标签就是表单 input type=text 是文件输入框
value 设置默认显示内容
input type=password 是 密码输入框
value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,
就可以使用隐藏域(提交的 时候同时发送给服务器)
select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度
form 标签是表单标签 action 属性设置提交的服务器地址 method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候,数据没有发送给服务器的三种情况: 1、表单项没有 name 属性值 2、单选、复选(下拉列表中的 option 标签)都需要添加 value 属性,以便发送给服务器 3、表单项不在提交的 form 标签中
GET 请求的特点是: 1、浏览器地址栏中的地址是:action 属性[+?+请求参数] 请求参数的格式是:name=value&name=value 2、不安全 3、它有数据长度的限制
POST 请求的特点是: 1、浏览器地址栏中只有 action 属性值 2、相对于 GET 请求要安全 3、理论上没有数据长度的限
1.3.6 其他标签
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
p 段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空)
p 段落标签 1
p 段落标签 2
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span> <span>span 标签 2</span>
<p>p 段落标签 1</p> <p>p 段落标签 2</p>
二 、CSS 技术介绍
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
1、CSS 和 HTML 的结合方式
1.1 第一种
在标签的 style 属性上设置”key:valuevalue;”,修改标签样式。
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span style="border: 1px solid red;">span 标签 1</span>
<span style="border: 1px solid red;">span 标签 2</span>
1.2 第二种
在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式。
<head>
<style type="text/css"> /* 需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。*/
div{ border: 1px solid red; }
span{ border: 1px solid red; } </style>
</head>
<body> <div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
1.3 第三种
把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。
使用 html 的 标签 导入 css 样 式文件。
1、css 文件内容:
div{ border: 1px solid yellow; }
span{ border: 1px solid red; }
html 文件代码
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<title>Title</title> <!--link 标签专门用来引入 css 样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
2、CSS 选择器
2.1 标签名选择器
标签名选择器的格式是:
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动的使用这个样式。
div{ border: 1px solid yellow;
color: blue;
font-size: 30px; }
span{ border: 5px dashed blue;
color: yellow;
font-size: 20px; }
2.2 id 选择器
id 选择器的格式是:
#id 属性值{
属性:值;
}
id 选择器,可以让我们通过 id 属性选择性的去使用这个样式。
#id002{ color: red; font-size: 20px; border: 5px blue dotted ;
<div id="id002">div 标签 1</div>
2.3 class 选择器(类选择器)
class 类型选择器的格式是:
.class 属性值{
属性:值;
}
class 类型选择器,可以通过 class 属性有效的选择性地去使用这个样式。
.class02{ color: blue; font-size: 30px; border: 1px solid yellow; }
<div class="class02">div 标签 class01</div>
<div class="class02">div 标签</div>
<span class="class02">span 标签 class01</span>
2.4 组合选择器
组合选择器的格式是: 选择器 1,选择器 2,选择器 n{ 属性:值; }
组合选择器可以让多个选择器共用同一个 css 样式代码
<style type="text/css">
div,.class01 , #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style>
<div id="id01">div 标签 class01</div> <br />
<span >span 标签</span> <br />
<div>div 标签</div> <br />
<div>div 标签 id01</div> <br />
总结
html和css是前端知识的基础知识,通过上面的总结可以帮助我们更好的制作网页。