黑马程序员JavaWeb学习笔记-HTML
HTML-新浪新闻
HTML格式化代码
mac: sheft+option+F
win: ctrl+alt+L
--标题排版
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
<!--
img标签:
src: 图片资源路径
width: 宽度(px 像素 ; % , 相对于父元素的百分比,此时img的父元素为body)
height: 高度(一般设置一个，另一个等比缩放)
路径书写方式:
绝对路径:
1.绝对磁盘路径
2.绝对网络路径
相对路径:
./ : 当前目录 , ./ 可以省略
../ : 上一级目录
-->
<img src=""> 新浪政务>正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
--标题样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!-- 方式二: 内嵌样式 -->
<style>
h1 {
color: red;
}
span {
color: #968d92;
}
</style>
<!-- 方式三: 外联样式 -->
<!--<link rel="stylesheet" href="路径">-->
</head>
<body>
<img src=""> 新浪政务>正文
<!-- 方式一: 行内样式 -->
<!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
<h1 >焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span>2023年03月02日21:50</span> <span>央视网</span>
<hr>
</body>
</html>
<!-- css -->
h1 {
color: red;
}
CSS选择器
优先级是 ID选择器 > 类选择器 > 元素选择器
<style>
/* 元素选择器 */
span {
color: #968d92;
}
/* 类选择器 */
.cls {
color: aliceblue;
}
/* ID选择器 */
#time {
color:aqua;
font-size: 13px; /*设置字体大小(记得加px)*/
}
</style>
超链接
<!--
标签: <a></a>
属性:
href: 指定资源访问的url
target: 指定在何处打开资源链接
_self: 默认值，在当前页面打开
_blank: 在空白页面打开
-->
<style>
a{
color: black;
/*设置文本为一个标准的文本，去掉超链接的下划线*/
text-decoration: none;
}
</style>
<img src="路径"> <a href="http://www.baidu.com" target="_self">新浪政务</a>
<span><a href="http://www.baidu.com" target="_blank">央视网</a></span>
--正文排版
<!-- 在HTML中无论输入多少个空格，只会显示一个。可以用使用占位符: -->
<srtyle>
p{
<!--text-indent: 定义第一个行内容的缩进-->
<!--text-height: 设置行高-->
text-indent: 35px; /*设置首行缩减*/
line-height: 40px; /*设置行高*/
}
#plast{
<!--text-align: 规定元素中的文本水平对齐方式-->
text-align: right; <!--右对齐 center 居中-->
}
</srtyle>
<!-- 正文 -->
<!-- 视频 -->
<video src="路径" controls></video>
<!-- 音频 -->
<audio src="路径" controls width=100%></audio>
<p>
<!--<strong> 加粗且标签强调语义 <b>加粗-->
韩续贤 <br><b>超厉害</b> <strong>!</strong>
</p>
<!--<br> 换行 <p> 段落-->
<p>
hxxclh
</p>
<p id="plast">作者: 韩续贤</p>
--页面布局
布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局。
标签：
div标签特点：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width，height）
span标签特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width，height）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
box-sizing: border-box; /* 指定width height为盒子的高度宽度 */
background-color: aquamarine; /* 背景色 */
padding: 20px 20px 20px 20px; /* 内边距，上 右 下 左 顺时针 */
border: 10px solid red; /* 边框，宽度 线条类型 颜色 */
margin: 30px 30px 30px 30px; /* 外边距，上 右 下 左 */
}
#center {
width: 65%;
/* margin: 0 17.5% 0 17.5%; 居中展示 */
margin: 0 auto;
}
</style>
</head>
<body>
<div id="center">
H H H H H H H H H H H H H H H
</div>
</body>
</html>
--表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" width = "600px">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td><img src="/Users/hanxuxian/Downloads/65565a6ea77bb.png" width="100px"></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td><img src="/Users/hanxuxian/Downloads/65565a6ea77bb.png" width="100px"></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
--表单标签
注意：表单项必须有name属性才可以提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
from表单属性: 表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
method: 表单的提交方式
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url有长度限制 . 默认为get请求
post: 在消息体(请求体)中传递的，参数无大小限制
-->
<form action="" method="get">
用户名：<input type="text" name="username">
年龄：<input type="text" age="age">
<input type="submit" value="提交">
</form>
</body>
</html>
表单项
<!--使用单选radio时，必须保证两个选项的name属性一致。否则都可以选-->
<label><input type="radio" name="gender" value="2"> 女 </label>
<!--点击label标签所包裹的任何区域，都可以聚焦到当前元素上-->
<select name="degree">
<option value="1">大专</option>
<option value="2">本科</option>
</select>
<!--option中所指定的这个value属性是最后表单提交的值-->
<textarea name="description" cols="30" rows="10"></textarea>
<!--cols指定一行可以输入多少字符，rows代表默认可以输入多少行-->
浙公网安备 33010602011771号