css 宋体_Java前端基础(一)之html/css

1.1 html

HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的

WEB开发工具：hbuilder/webstorm/vs code/eclpise

最简单的HTML

<!DOCTYPE html> ---->告诉浏览器，当前HTML语言使用的是第5个版本，2014年发布

<html> --->根标签，一般有2个标签，head，body标签

<head> --->head标签里的内容一般不直接现实在页面上，用来说明和描述网页文档

<title></title> ---->说明网页标题

</head>

<body> --->body标签放置真正显示的内容

</body>

</html>

标签：左右尖括号括起来的内容就是标签。单标签和双标签。双标签是有起始和结束标签。

HTML常用标签

网页内容的标题标签

H1,H2,H3...H6，都是网页内容的标题标题

网页注释标签

段落标签

<p>超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>

图片标签

最常用容器标签

<div>hello</div>

链接标签

跳转到淘宝

跳转当前页面的某个地方

1.2 列表

表单标签

form表单标签

action:将表单数据提交给什么服务器（服务器的地址）

method:get/post

get和post区别：get会将表单提交的内容直接放在请求的URL地址里，效率高，不安全。post不会将表单数据显示到url上，会放置在请求的body上。

搜索/正常的请求就会使用get

登陆/注册等比较隐私和安全的内容时候，就需要用到POST,上传文件的时候也会用到post

input标签有多种类型

type=》

text（文本输入）

password(密码)

radio:单选框，注意单选框如果选择的内容是同一项内容，那么多个输入input标签的name值必须一致。

checkbox:复选框，选择的内容是同一项内容，那么多个输入input标签的name值必须一致

color:输入颜色（少用）

date:时间标签（少用）

select>option

textarea：长文本输入标签

案例：

<!DOCTYPE html>

1.3 css

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

CSS使用

1、style属性上直接使用

<h1 style="color:purple;">今晚吃什么？</h1>

2、Style标签上使用

语法：

选择器{样式的内容}

</style>

CSS常用选择选择器：

元素选择器：元素名称

Class选择器：.+类名

ID选择器：#+id名称

3、Link标签引入css文件使用

优先级情况

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

越复杂的选择器优先级越高

备注：!Important,将样式的优先级提高到最高

文字

Color:文字颜色

Font-size:文字的大小

font-family:文字字体，尽量使用黑体，微软雅黑，宋体，普通用户都有的字体

Font-weight:字体粗细,100-900,具体的粗细根据字体文件本身有什么粗细的字体来决定

Text-align:文字的排版，left,center,right

Line-height:行高，行与行之间的高度

Text-shadow:文字阴影

text-shadow: 0 0 10px orange,0 0 20px yellow;

Text-shadow:水平偏移值垂直偏移值阴影的模糊度阴影的颜色，设置多个阴影用逗号隔开

容器盒子

Box-size:设置盒子模型

Width:宽度

Height:高度

Padding:内边距

Margin:外边距

Border:边框

Box-shadow:盒子阴影

Display:设置盒子是块级元素还是行级元素还是弹性元素

Background:设置元素的背景，背景图片，背景颜色