当前位置：首页 > news >正文

JavaWeb——HTML、CSS

news 2025/10/16 18:18:07

1.概述

2.HTML

a.HTML结构标签

b.图片标签

c.标题标签

d.水平线标签

e.布局标签

f.超链接标签

e.视频标签

f.音频标签

e.换行标签

f.段落标签

g.加粗标签

h.表格

1.声明表格

2.表行

3.普通表格

4.加粗表格

i.表单标签

1.声明表单

2. 表单

3.下拉列表

4.文本域

3.CSS

a.引入方式

b.颜色

c.选择器

d.盒子模型

1.概述

HTML：HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写。它用于创建和设计网页的结构和内容。通过HTML，开发者可以在网页中嵌入文本、图像、链接、表格等元素。HTML是一种标记语言，使用标签（tags）来定义不同类型的元素。

CSS:CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。

2.HTML

a.HTML结构标签

<html>
<head><title>网页链接标题</title>
</head>
<body></body>
</html>

注意：

1.HTML标签不区分大小写

2.HTML标签属性值单双引号都可以

3.HTML语法松散

b.图片标签

 <img src="" width="" height="">

src:图片资源路径

width:宽度（px,像素；%,百分比）

height:宽度（px,像素；%,百分比）

绝对路径：

绝对磁盘路径：从盘符开始的路径。在Windows系统中，它以磁盘名称（如C:或D:）开头，具体的文件或文件夹名称做结尾。。例如：D:\bbbb

绝对网络路径：在网页或网络应用中，以完整的URL形式给出的路径。它包括了协议（如http://或https://）、域名、端口号（如有）以及具体的文件或资源路径。通过绝对网络路径，可以直接访问到网络上指定的资源或页面。例如：https://n.sinaimg.cn/finance/120/w1920h600/20241105/117e-3d720875b6d1c0bde866aad611e620be.jpg

相对路径：

相对当前目录：系统当前目录到文件所在目录的路径。例如：./img/1.jpg

注意：./可以省略

相对上一级目录：相对于当前目录的上一级目录。例如：../img/1.jpg

c.标题标签

    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

运行结果:

d.水平线标签

  <hr>

e.布局标签

 <div></div>

注意：

1.一行只显示一个

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

<span></span>

注意：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

f.超链接标签

<a href="" target=""></a>

href:指定资源访问地url

target:指定在何处打开资源链接

-self:默认值，在当前页面打开

-blank:在空白页面打开

e.视频标签

 <video src="" controls="controls" width="" ></video>

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

f.音频标签

 <audio src="" controls="controls"></audio>

src:规定音频的url

controls:显示播放控件

e.换行标签

<br>

f.段落标签

<p></p>

g.加粗标签

<strong></strong>

<b></b>

h.表格

1.声明表格

<table border=""  cellspacing="" width="" ></table>

border:表的边框

cellspacing:单元格之间空白大小

width:表的大小

2.表行

 <tr></tr>

3.普通表格

 <td></td>

4.加粗表格

<th></th>

案例：

<html>
<head><title>Document</title></head>
<body><!-- 表边框大小、表单元格空白大小、设置表的大小 --><table border="1px" width="900px" cellspacing="0"><!-- 第一行 --><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><!-- 第二行 --><tr><td>1</td><td><img src="./img/huawei.jpg" ></td><td>华为</td><td>华为技术有限公司</td></tr><!-- 第三行 --><tr><td>2</td><td><img src="./img/alibaba.jpg" ></td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table>
</body>
</html>

运行结果：

i.表单标签

1.声明表单

<form action="" method=""></form>

action:表单提交的url,如果不指定，默认提交到当前页面

method:表单的提交方式，默认为get

get:在url后面拼接表单数据，比如，?username=天天&password=13456，url长度有限

post:在消息体（请求体）中传递的，参数大小无限制

2. 表单

<input type="" name="">

type:表单输入形式

name:表单名称

type:

3.下拉列表

<select name=""><option value=""></option></select>

name:列表提交内容名称

value:列表选取项提交的值

案例：

<html>
<head><title>Document</title></head>
<body><form action="" method="post"><select name="学历"><option value="">>----------请选择----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select></form></body>
</html>

运行结果：

4.文本域

 <textarea name="" cols="" rows=""></textarea>

name:列表提交内容名称

cols:指定了文本区域的可见宽度

rows:指定了文本区域的可见行数

案例：

<html>
<head><title>Document</title></head>
<body><form action="" method="post">描述：<textarea name="描述" cols="30" rows="10" ></textarea></form></body>
</html>

运行结果：

3.CSS

a.引入方式

行内样式：写在标签的style属性中（不推荐）

 <h1 style="color: brown;">一级标题</h1>

内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

 <style>h1{/*标签 */color: brown;/*属性名：属性值*/}</style>

外嵌样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

 <link rel="stylesheet" href="./CSS/news.css"><!-- 文档与被链接文档之间的关系       引入CSS文件的路径 -->

b.颜色

关键字:预定义的颜色名，例如：red、green

rag表示法：红绿蓝三原色，每项取值范围：0~255,例如：rag(0,0,0)

十六进制表示法：#开头，将数字转换为十六进制表示，例如：#000000、#ccc

c.选择器

元素选择器

元素名称{

属性名：属性值

}

id选择器

1.设置id值

id=""

2.定义id选择器

#id属性值{

属性名：属性值

}

类选择器

1.设置class的值

class=""

2. 定义class选择器

.class属性值{

属性名：属性值

}

优先级：id选择器>类选择器>元素选择器

d.盒子模型

盒子模型：盒子模型是由内容区域（content）、内边区域（padding）、边框区域（border）、外边距区域（margin）组成，页面中的所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包括在一个矩形区域内，通过盒子的视角更方便的进行布局

1.概述

2.HTML

a.HTML结构标签

b.图片标签

c.标题标签

d.水平线标签

e.布局标签

f.超链接标签

e.视频标签

f.音频标签

e.换行标签

f.段落标签

g.加粗标签

h.表格

1.声明表格

2.表行

3.普通表格

4.加粗表格

i.表单标签

1.声明表单

2. 表单

3.下拉列表

4.文本域

3.CSS

a.引入方式

b.颜色

c.选择器

d.盒子模型

相关文章：