本文为JAVAWEB 关于HTML 的基础学习
一 概述
HTML 超文本标记语言
- 超文本 超越文本的限制 比普通文本更强大 除了文字信息 还可以存储图片 音频 视频等
- 标记语言 由标签构成的语言
- HTML标签都是预定义的 HTML直接在浏览器中运行 在浏览器解析
CSS 是一种用来表现HTML或XML等文件样式的计算机语言,它是对HTML标记语言的一种样式描述,并定义了其中元素的显示方式。
定义:CSS是一种用来美化页面和控制页面布局的语言。
功能:
- 美化界面:设置标签文字大小、颜色、字体加粗等样式。
- 控制布局:设置浮动、定位等样式,使网页布局更加灵活自如。
二 使用
(1) 基础标签和样式
[1] 标题标签
- 标签:<h1>...</h1> (h1-h6 重要程度依次递减)
- 注意:HTML标签都是预定义好的 不能自己随意定义
[2] 水平线标签
<hr>
[3] 图片标签
<img src = "..." width = "..." height = "...">
- src : 指定图像的url(绝对路径/相对路径)
- width : 图像的宽度 height:图像的高度(像素/相对于父元素的百分比)
- 绝对路径:绝对磁盘路径(D://XXXX)绝对网络路径 (https://XXXX)
- 相对路径::从当前文件开始查找(./ 当前目录 ../ 上级目录)
<!DOCTYPE html>
<html lang="en">
<head>
<!--使用字符集UTF-8-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>***与文艺工作者的故事|一见如故的情谊</title>
</head>
<body>
<img src = "../JPG/news_logo.png"> 新浪政务>正文
<h1>***与文艺工作者的故事|一见如故的情谊</h1>
<hr>
2024年10月31日 15:44 新华社
<hr>
</body>
</html>
[4] 标题样式
<span>标签:
- <span> 是一个在开发网页时大量会用到的没有语义的布局标签
- 特点:一行可以显示多个(组合行内元素)宽度和高度默认由内容撑开
CSS 样式控制:
CSS 引入方式:
- 行内样式: 写在标签的style属性中
- 内嵌样式: 写在style标签中(可以写在页面任何位置 但通常约定写在head标签中)
- 外联样式:写在一个独立的.css文件中(通常需要link标签在网页中引入)
css 选择器:
- 元素选择器:元素名称{color:red (样式设定)}
- Id选择器: #id属性值{color:red}
- 类选择器: .class属性值{color:red}
- 优先级: id选择器 > 类选择器 > 元素选择器
颜色表示:
- 关键字:red,green...
- rgb表示法:rgb(255,0,0),rgb(134,100,89)
- 十六进制:#ff0000,#cccccc,#ccc
<!DOCTYPE html>
<html lang="en">
<head>
<!--使用字符集UTF-8-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>***与文艺工作者的故事|一见如故的情谊</title>
<style>
#hid{
color:#4D4F53;
}
#time{
color: #968D92;
font-size: 13px; /*设置字体大小*/
}
</style>
</head>
<body>
<img src = "../JPG/news_logo.png"> 新浪政务>正文
<h1 id = "hid">***与文艺工作者的故事|一见如故的情谊</h1>
<hr>
<span id = "time">2024年10月31日 15:44 </span><span>新华社</span>
<hr>
</body>
</html>
[5]超连接
- 标签:<a href="..." target="..."></a>
- href :指定资源访问的url
- target:指定在何处打开链接 _self:默认值 在当前页面打开 _blank:在空白页面打开
[6]视频标签
<video>
- src:规定视频的url
- controls:显示播放控件
- width:播放器的宽度
- height:播放器的高度
[7]音频标签
<audio>
- src:规定音频的url
- controls:显示播放控件
[8]段落标签
<p>
[9]CSS属性
- color 颜色属性 控制文字颜色
font-size 字体大小
text-indent 设置首行缩进
line-height 设置行高
text-alogn 设置文本对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<!--使用字符集UTF-8-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>***与文艺工作者的故事|一见如故的情谊</title>
<style>
#hid{
color:#4D4F53;
}
#time{
color: #968D92;
font-size: 13px; /*设置字体大小*/
}
a{
color: #000;
text-decoration: none; /*标准文本*/
}
p{
text-indent: 35px; /*设置首行缩进*/
line-height: 45px; /*设置行高*/
}
#plast{
text-align:right;
}
</style>
</head>
<body>
<img src = "../JPG/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self"> 新浪政务></a>正文
<h1 id = "hid">***与文艺工作者的故事|一见如故的情谊</h1>
<hr>
<span id = "time">2024年10月31日 15:44 </span><a href="https://h.xinhuaxmt.com/vh512/share/12257712?newstype=1006&homeshow=1" target="_self"> 新华社</a>
<hr>
<video src="../VIDEO/***与文艺工作者的故事|一见如故的情谊_新浪新闻.mp4" controls width="950px"></video>
<p> 1978年,贾大山凭借小说《取经》斩获全国首届短篇小说奖,成为文坛冉冉升起的新星。乡村的生活体验让贾大山擅长发掘基层群众的苦乐浮沉。 </p>
<img src="../JPG/01.gif">
<p> 1982年,来到正定任职的***第一个登门拜访的,就是作家贾大山。文学艺术、戏曲电影、古今中外、社会人生……两人一见如故,无话不谈。此后的几年里,他们的交往更加频繁了,两人促膝交谈,常常到午夜时分。</p>
<img src="../JPG/02.gif">
<p> 作为一名作家,贾大山有着洞察社会人生的深邃目光和独特视角。***后来感念:“在与大山作为知己相处的同时,我还更多地把他这里作为及时了解社情民意的窗口和渠道,把他作为我从政与为人的参谋和榜样。”</p>
<img src="../JPG/03.gif">
<p> 1982年冬,在众人举荐和县领导反复动员劝说下,贾大山挑起了文化局长的重担。***回忆这段经历时曾说:“他本身就来自于群众,他不愿意做官,是我生拉硬拽让他去当县文化局局长。”贾大山不负***的信任,为正定文化事业呕心沥血。</p>
<img src="../JPG/04.gif">
<p> 1985年5月,***即将调离正定。分别的那一晚,两人又一次长谈,临别前流下了激动的泪水。1997年,贾大山罹患癌症,不幸去世。***撰写《忆大山》一文,回忆与贾大山在正定的宝贵情谊。</p>
<img src="../JPG/05.gif">
<p> 2014年10月,***在文艺工作座谈会上提起已逝故人贾大山:“他给我印象最深的就是忧国忧民情怀,‘处江湖之远则忧其君’。”****勉励文艺工作者“与人民同呼吸、共命运、心连心”。</p>
<img src="../JPG/06.jpg">
<p> 策划:孙志平、樊华
<br> 统筹:韩珅、王志斌
<br> 编导:李俞辉、单畅
<br> 记者:曲澜娟、李俞辉
<br> 摄像:左洪泽
<br> 包装:郭雨晗
<br> 配音:王帅龙
<br> 新华社音视频部制作</p>
<p id="plast">
责任编辑:王树淼 SN242
</p>
</body>
</html>
(2) 页面布局
- 盒子:页面中所有的元素(标签),都可以看作一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
- 盒子模型组成:内容区域(content),内边距区域(padding),边框区域(border),外边框区域(margin)
- 布局标签:实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签
- 标签:<div> <span>
- 特点:
div标签 一行只显示一个(独占一行)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽 高(width height)
span标签 一行可以显示多个宽度和高度默认由内容撑开
不可以设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div{
width:200px;
height:200px;
box-sizing:border-box; /*指定height weight 为盒子的宽高*/
background-color:aquamarine; /*背景色*/
padding: 20px 20px 20px 20px; /* 内边距 上 右 下 左 */
border: 10px solid red; /* 边框 宽度 线条类型 颜色*/
margin:30px 30px 30px 30px; /*外边框 上 右 下 左*/
}</style>
</head>
<body>
<div>
A A A A A A A A A A A A
</div>
</body>
</html>
#center{
width:65%;
margin:0% 17.5% 0% 17.5%; /* 0 auto*/ /* 出现四个值 是上右下左 出现三个值 是上(左右)下 出现是两个值 是(上下)(左右)*/
}
padding 可以只设置某一个方向的边框 可以在padding后面加上-位置 如padding-top,padding-left
(3) 表格标签
- 场景:在网页中以表格(行 列)形式整齐展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格演示t</title>
</head>
<body>
<table border="lpx" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>学号</th>
<th>性名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>23130001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>23130002</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
</body>
</html>
(4) 表单和表单项标签
- 场景:在网页中主要负责数据采集功能 例如注册登录等的数据采集
- 标签:<form>
- 表单项:不同类型的input元素,下拉列表,文本域等
<input> 定义表单项 通过type属性控制输入形式
<selset> 定义下拉列表
<textarea> 定义文本域
- 属性
action 规定当提交表单时向何处发送表单数据 URL
method 规定用于发送表单数据的方式 GET POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<!--
form表单属性
action 规定当提交表单时向何处发送表单数据 URL 不指定时默认是提交到当前界面
method 规定用于发送表单数据的方式 GET POST
get 在url后面拼接表单数据 但是url长度有限制
poet 在消息体(请求体)中传递 参数大小无限制
-->
<form action="" method="get">
用户名:<input type="text" name="usetname">
年龄:<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
<input> 定义表单项 通过type属性控制输入形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单项标签页</title>
</head>
<body>
<form action="" method="post">
姓名:<input type="text" name="name"><br><br>
密码:<input type="password" name="password"><br><br>
性别:<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="2">女</label> <br><br>
爱好:<label><input type="checkbox" name="hobby" value="java">java</label>
<label><input type="checkbox" name="hobby" value="game">game</label>
<label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>
图像:<input type="file" name="image"><br><br>
生日:<input type="date" name="birthday"> <br><br>
时间:<input time="time"><br><br>
日期时间:<input type="datetime-local" name="datetime"><br><br>
邮箱:<input type="email" name="email"><br><br>
年龄:<input type="number" name="age"><br><br>
学历:<select name="degree">
<option value="">----请选择----</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select><br><br>
描述:<textarea name="description" cols="30" rows="10"></textarea><br><br>
<input type="hidden" name="id" value="1">
<!--表单常见按钮-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</body>
</html>
学习时间 2024-10-31