HTML和CSS学习部分总结1

程序员文章站 2022-06-28 13:12:51

HTML和CSS学习部分总结1HTMLform标签input标签type属性select标签CSS常见选择器常见属性容器盒子HTML超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用---> html5标准网页声明---> 向搜索引擎表示该页面是html语言，且语言为英文--->head标签里的内容一般不...

HTML和CSS学习部分总结1

HTML

form标签
input标签

type属性

select标签

常见选择器
常见属性
容器盒子

HTML

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用

<!DOCTYPE html>				---> html5标准网页声明
<html lang="en">			---> 向搜索引擎表示该页面是html语言，且语言为英文
<head>		--->head标签里的内容一般不直接现实在页面上，用来说明和描述网页文档
    <meta charset="UTF-8">	--->申明文档使用的是UTF-8的编码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>	   				--->说明网页标题
</head>
<body>
    	--->放置真正显示的内容
</body>
</html>

meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
viewport是设备屏幕上显示我们网页的那块区域。
width 指定视区的逻辑宽度。它的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。
initial-scale用于设置Web页面初始缩放比例，设为1.0则显示未经缩放的Web页面。

标签：左右尖括号括起来的内容就是标签。单标签和双标签。双标签是有起始和结束标签。结束标签会在左尖括号后加一个“/”。

form标签

为用户输入创建 HTML 表单，块级元素
可包含 input元素，比如文本字段、复选框、单选框、提交按钮等等
包含 menus、textarea、fieldset、legend 和 label 元素
用于向服务器传输数据

action属性，规定当提交表单时向何处发送表单数据
method属性，有get、post两个值
get和post区别：get(搜索/正常的请求)会将表单提交的内容直接放在请求的URL地址里，效率高，不安全。post(登陆/注册等比较隐私和安全的内容以及上传文件时)不会将表单数据显示到url上，会放置在请求的body上。

input标签

用于搜集用户信息

type属性

文本输入：text
密码：password
单选框：radio
复选框：checkbox
颜色：color
时间：date
提交：submit

select标签

可创建单选或多选菜单
option属性用于定义列表中可用选项

CSS

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言
强调文本 强调文本

常见选择器

元素选择器：元素名称
Class选择器：.+类名
ID选择器：#+id名

优先级 id>class>元素>默认的浏览器样式>继承的样式

常见属性

Color:文字颜色
Font-size:文字的大小
Font-family:文字字体，尽量使用黑体，微软雅黑，宋体，普通用户都有的字体
Font-weight:字体粗细,100-900
Text-align:文字的排版，例如left,center,right
Line-height:行高，行与行之间的高度
Text-shadow:文字阴影

容器盒子

Width:宽度
Height:高度
Padding:内边距
Margin:外边距
Border:边框
Box-shadow:盒子阴影
Display:设置盒子是块级元素还是行级元素还是弹性元素
Background:设置元素的背景

本文地址：https://blog.csdn.net/qq_43455138/article/details/107535450

HTML和CSS学习部分总结1