HTML与CSS

最新推荐文章于 2023-03-12 16:38:04 发布

qq_44736296

最新推荐文章于 2023-03-12 16:38:04 发布

阅读量77

点赞数 1

分类专栏： javaweb 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_44736296/article/details/118197765

版权

javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML与CSS

一、HTML

1.什么是html

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

**超文本：**功能比文本强大, 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 语法由标签组成

2.HTML结构和基本语法

2.1HTML的结构
HTML与CSS

文档结构介绍：
- 文档声明：用于声明当前HTML的版本，这里的<!DOCTYPE html>是HTML5的声明
- html根标签：除文档声明以外，其它内容全部要放在根标签html内部
- 文档头部配置：head标签，是当前页面的配置信息，外部引入文件, 例如网页标题、字符集等
- 文档显示内容：body标签，里边的内容会显示到浏览器页面上

2.2 HTML语法规范

扩展名是html或者htm
html标签不区分大小写

<p></P>
<P></P>
------
<p></P>
<P></p>

html由头(head)和体(body)组成
标签是可以嵌套的,标签里面可以放标签
标签一般由起始标签开始，结束标签终止(成对出现)。但是如果标签不修饰内容，可以在标签里结束。

<p id="1">hello</p>
<br/>

3.3.标签属性

属性是属于标签的，修饰标签，让标签有更多的效果
属性一般定义在起始标签里面。

<font color='red'>hello</ font>

属性一般以 属性=属性值的形式存在
属性值一般用 '' 或者“ ” 括起来。不加引号也是可以的.(不建议使用)

3.HTML常用的标签

字体标签

<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>

标题标签

<hn>标题<hn>  n取值1~6, 1是一级标题, 2是二级标题...

段落标签

<p>段落</p>

注意：段落之间自动进行换行

粗体标签

<b>内容</b>

斜体标签

<i>内容</i>

下划线标签

<hr/>

换行标签

<br/>

Ctrl+Shift+/: 注释快捷键

4.图片显示

4.1 图片标签(重要)

img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片

语法:
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>

示例代码

    <!--掌握: src属性: 图片的路径; width属性:指定图片的宽度 ; height属性: 指定图片的高度;
        了解: alt属性: 图片的描述(只有图片显示错误的时候才有效果); title属性: 鼠标放上去显示的标题-->
    <img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/>

4.2.路径问题

4.2.1相对路径

相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

同级

同级就是"图片"和".html文件"存储在同一个文件夹中

格式: src=“QRCode.jpg”

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

上级

上级就是和存"储代码的文件夹"在同一个文件夹中

格式: src="…/img/QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫img的文件夹中的名字叫做QRCode.jpg的图片, 其中../ 代表找到当前文件夹的上一级文件夹

5.列表标签

5.1无序列表

语法

<ul type="类型">
    <li>需要显示的条目内容</li>
    ...
</ul>

注意点
ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.

li要定义在ul里面

5.2有序列表

<ol type="类型" start="起始索引">
    <li>需要显示的条目内容</li>
    ...
</ol>

6.超链接标签

6.1超链接标签的基本使用

超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的

超链接标签的格式:
		<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
		target属性取值: 
		_blank：新起页面
		_self：当前页面（默认）

示例代码

<!--href属性: 跳转的路径(可以是本地的也可以是远程的)
target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
-->
<a href="../03_公司简介案例/company.html" id="top">查看公司简介</a><br/>

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

6.2假链接

就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接

<a href="#">这是一个假链接</a>

7.表格标签

7.1 基本表格

语法

表格：由<table>标签定义；
行：每个表格里有若干行<tr>；
单元格：每行被分割为若干单元格<td>。
- 单元格里可以包含文本、图片、列表、段落、表单、水平线、表格等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bqdu9Rz0-1624545854576)(F:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day22html和css/笔记/img/1568558602924.png)]

7.2 单元格合并

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApPvytKk-1624545854589)(F:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day22html和css/笔记/img/1563007681056.png)]

删除要合并的格子, 只留一个(最前方的那一个)
如果是行合并设置rowspan, 如果是列合并设置colspan, 几个合并值就是几

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--
table就是表格
1. border属性: 表示表格的边框
2. width属性: 表示表格的宽度
3. cellspacing属性: 表示单元格之间的间距
4. cellpadding属性: 表示单元格里面的内容距离单元格的内边框的边距
5. bgcolor属性: 背景颜色
6. align属性: 表格的水平对齐方式

tr就是表格中的行
1. bgcolor: 该行的背景色
2. align: 该行的所有内容的水平对齐方式

td就是表格中的单元格
1. bgcolor: 该单元格的背景色
2. align: 该单元格的内容的水平对齐方式
3. rowspan: 跨行合并单元格,需要跨几行则rowspan取值就为几
4. colspan: 跨列合并单元格，需要跨几列则colspan的取值就为几

caption标签就是表格的标题

th标签:它也是单元格，但是它是表头单元格
-->
        <table border="1px" width="600px" cellspacing="0px" cellpadding="10px" bgcolor="red" align="center">
            <caption>我是表格的标题</caption>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
            <tr bgcolor="blue" align="center">
                <td>11</td>
                <td bgcolor="green" align="right">12</td>
                <td>13</td>
            </tr>

            <tr>
                <td rowspan="2">21</td>
                <td>22</td>
                <td>23</td>
            </tr>

            <tr>
                <td colspan="2">32</td>
            </tr>
        </table>
    </body>
</html>

8.表单标签

通过form来定义: 包裹表单项、指定向服务器提交的路径、提交方式

<form>
    //1.input类型
    //2.select类型
    //3.textarea类型
</form>

常用属性

action:提交路径,默认是当前页面,#

method:提交方式,常用的是get和post. 默认就是get

get和post区别

1. 携带数据的位置:get是在地址栏后面携带的，post是在http协议的请求体中携带的
2. 携带数据的类型:get只能携带字符串不能携带文件，post可以携带任意类型的数据，所以如果是文件上传那么只能选择使用post方式
3. 携带数据的大小:get携带数据的大小一般不超过4kb,post携带数据的大小是没有限制的(但是一般服务器都会做限制)
4. 安全性:post比get更安全

8.2.form的常见子标签

input:输入域, 通过type属性来指定类型

select :选择列表

textarea：文本域

8.2.1 input：输入类型

<input type="xxx"/>

type属性,类型是由属性（type）定义的

text(默认类型) 文本框
password 密码框
radio 单选框只有当name属性相同的单选框，才是同一组单选框才能够实现单选效果
checkbox 复选框同一组多选框，也应该具备相同的name属性
file 文件选择框
date 日期选择框
hidden 隐藏域：向服务器提交数据，但是不在页面上展示出来
submit 提交按钮：内置提交表单的功能
button 普通按钮：不内置任何功能，我们需要在学习js之后再给他绑定点击事件
reset重置按钮：内置重置表单的功能

8.2.2select :选择菜单

<select name="">
	<option value="">显示的内容</option>
</select>

option：选择菜单的选项

注意：

name在select里面指定
value在option里面指定
option定义在select里面

8.2.3textarea:文本域

<textarea rows="20" cols="30" name="introduce"></textarea>

属性：

cols列
rows:行

8.3.通用属性

1.name

1. 如果表单项的数据需要提交给服务器，那么他就必须具备name属性

2. 2. 同一组单选、多选框需要具备相同的name

2.value

1. 按钮的value属性就是按钮上的文字

2. 输入框、密码框、文件选择框、日期选择框等等的value属性的值，就是你所输入的值
   3.  单选和多选框都需要指定value

8.4.设置默认值

text,password:通过value属性

用户名: <input type="text" name="username" value="zs"/>

radio checkbox:通过checked属性

性别: <input type="radio" name="sex" value="1"/>男
      <input type="radio" name="sex" value="0" checked="checked" />女

select :在option上通过selected属性

籍贯: <select name="address">
        <option value="sz">深圳</option>
        <option value="bj">北京</option>
        <option value="sh" selected="selected">上海</option>
    </select><br/>

textarea:直接在标签体中写

自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>

8.5 其它属性

readonly属性:是否只读,可以让用户不修改这个输入框的值,就使用value属性设置默认值
disabled属性: 是否可用,如果某个输入框有disabled那么它的数据不能提交到服务器通常是使用在有的页面中，让一些按钮不能点击
placeholder属性: 输入框中的提示信息
单选和多选框也可以设置默认选中，通过checked属性
option标签通过selected属性设置默认选中

9. 音频标签`audio`

语法

<audio>：用于播放声音，比如音乐或其他音频流，是 HTML 5 的新标签。
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
常用属性有

属性名	取值	默认值	描述
`src`	URL		音频资源的路径
`autoplay`	`autoplay`	`autoplay`	音频准备就绪后自动播放
`controls`	`controls`	`controls`	显示控件，比如播放按钮。
`loop`	`loop`	`loop`	表示循环播放
`preload`	`preload`	`preload`	音频在页面加载时进行预加载。如果使用 “autoplay”，则忽略该属性。

10.视频标签`video`

语法

<video> 标签用于播放视频，比如电影片段或其他视频流，是 HTML 5 的新标签。
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
常用属性

属性名	取值	默认值	描述
`src`	URL		要播放的视频的 URL。
`width`			设置视频播放器的宽度。
`height`			设置视频播放器的高度。
`autoplay`	`autoplay`	`autoplay`	视频在就绪后自动播放。
`controls`	`controls`	`controls`	显示控件，比如播放按钮。
`loop`	`loop`	`loop`	如果出现该属性，则当媒介文件完成播放后再次开始播放。
`preload`	`preload`	`preload`	视频在页面加载时进行加载。如果使用 “autoplay”，则忽略该属性。
`muted`	`muted`	`muted`	规定视频的音频输出应该被静音。
`poster`	URL		视频下载时显示的图像，或者视频播放前显示的图像。

二、CSS

1.div和span

1.1什么是div和span

div是html里面的一个标签<div></div> . 没有特定的含义, 作为容器. 一般用于配合css完成网页的基本布局,

span也是一个标签<span></span>,没有特定含义,一般作为文本容器

1.2div和span的区别

div是块级元素(eg:h1,p)会独占一行,span是行内元素(eg:b,i,img)不会独占一行

div中可以嵌套其它所有的标签(除了body,html,head), span标签中只能嵌套文本/图片/超链接

2.CSS介绍

2.1什么是CSS

层叠样式表
- 层叠: 样式层层叠加
- 样式表: 样式的集合

学习html就是学习标签, 学习CSS主要学习样式(属性),选择器

2.2 CSS的作用

美化页面,修饰页面
HTML负责内容(hello),CSS负责样式(颜色,字体大小…)

<font color="red" size="7">hello</font>

html当做毛坯房, CSS当做装修

2.3CSS语法

{
	属性:属性值 属性值;
	属性:属性值 属性值
}

注意

属性和属性值用:连接
如果有多个属性值用空格隔开
如果有多个属性,属性和属性之间用;隔开最后一个;可以不写

3.CSS引入方式

HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决把CSS代码写在什么地方的问题
引入的方式有：
- 内联(行内)样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
- 内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
- 外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合

3.1通过标签的style属性来结合【了解】

<!--通过style属性-->
<p style="属性名称:属性值;..."></p>

3.2通过style标签来结合【掌握】

<head>
	<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
           	
        }
	</style>
</head>

注意点:
	1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
	2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
	3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略

3.3通过link标签结合【掌握】

创建一个css文件(后缀是css)
通过link标签引入

<head>
	<link rel="stylesheet" href="../../css/myCss.css" />
</head>

link标签属性:
	- href:css文件路径

3.4 三种结合方式优先级

行内样式优先级永远是最高的，而内部和外部样式是谁写在后面谁就优先

4.CSS基本选择器

选择器	描述	语法	示例
标签选择器	根据HTML标签名称选择标签	`标签名称{}`	`div{ color:red; }`
ID选择器	根据id属性值选择标签	`#id值{}`	`#d1 { color:blue; }`
类选择器	根据class属性值（类名）选择标签	`.类名{}`	`.c1 { color:yellow; }`
通用选择器	选取所有标签	`*{}`	`*{ color: pink;}`

优先级

选择器优先级

ID选择器 > 类选择器 > 标签选择器 > 通用选择器
如果优先级相同，那么就满足就近原则

5.CSS扩展选择器

5.1 组合选择器

多个基本选择器的组合，可以更灵活的选取标签

选择器	描述	语法	示例
层级选择器	层级关系选择标签	`祖先后代`	`div a{ }`
属性选择器	根据指定属性的值筛选元素	`[属性='值']`	`input[type='text'] { }`
并集选择器	多个选择器的结果进行合并	`选择器1,选择器2,...`	`.c1, span { }`

5.2 伪类选择器【了解】

了解几个超链接相关的伪类选择器

选择器	描述	示例
`:link`	选择正常状态的超链接	`a:link{}`
`:visited`	选择被访问过的超链接	`a:visited{}`
`:hover`	选择鼠标悬停的超链接	`a:hover{}`
`:active`	选择鼠标按下的超链接	`a:active{}`

6.CSS常用属性

6.1 背景属性

介绍

功能	属性名	属性取值
背景色	`background-color`	1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	`background-image`	`url(图片的路径)`
平铺方式	`background-repeat`	`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复。 `repeat-y` 背景图像将在垂直方向重复。 `no-repeat`背景图像将仅显示一次。
背景位置	`background-position`	left top

6.2 文本样式

功能	属性名	属性取值
颜色	`color`	颜色
设置行高	`line-height`	像素
文字修饰	`text-decoration`	`underline` 下划线 `overline` 上划线 `ine-through` 删除线 `none` 不要线条
文本缩进	`text-indent`	用于缩进文本，可以使用em单位。
文本对齐	`text-align`	`left` 把文本排列到左边。 `right` 把文本排列到右边。 `center` 把文本排列到中间。默认值：由浏览器决定。

6.3 字体属性

功能	属性名	作用
字体名	`font-family`	设置字体，本机必须要有这种字体
设置大小	`font-size`	像素
设置样式	`font-style`	`italic` 斜体 `normal` 默认值。浏览器显示一个标准的字体样式。
设置粗细	`font-weight`	`bolder`加粗

qq_44736296

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS

HTML与CSS一、HTML1.什么是html超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言，是网页制作所必备的。**超文本：**功能比文本强大, 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言: 语法由标签组成2.HTML结构和基本语法2.1HTML的结构文档结构介绍：文档声明：用于声明当前HTML的版本，这里的<!DOCTYPE html>是HT
复制链接

扫一扫