一.什么是HTML、CSS
HTML（HyperText Markup Language）：超文本标记语言。
（超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。 HTML代码直接在浏览器中运行，HTML标签由浏览器解析。）
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。
二.HTML
<img> src：指定图像的url（绝对路径 / 相对路径）
绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）
相对路径：从当前文件开始查找。 （./ : 当前目录, ../ : 上级目录）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）
<h1> - <h6> 标题标签
<hr> 水平线标签
<a> 超链接
href：指定资源访问的url
target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
<video> 视频标签
- src：规定视频的url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
<audio>音频标签
- src：规定音频的url
- controls：显示播放控件
<p>段落标签
<b> / <strong> 文本加粗标签
<br>换行标签
<div>标签(没有语义的布局标签，同span):
一行只显示一个（独占一行） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高（width、height）
<span>标签
一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高（width、height）
<table>表格标签
| <table> | 定义表格整体，可以包裹多个 <tr> | border：规定表格边框的宽度 |
| width：规定表格的宽度 | ||
| cellspacing: 规定单元之间的空间。 | ||
| <tr> | 表格的行，可以包裹多个 <td> | |
| <td> | 表格单元格(普通)，可以包裹内容 | 如果是表头单元格 可以替换为 <th>（加粗居中） |
<form>表单标签
在网页中主要负责数据采集功能，如 注册、登录等数据采集
- 表单项：不同类型的 input 元素、下拉列表、文本域等。
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
<select name="degree">
<option value=""></option>
- <textarea>：定义文本域
- 属性
- action：表单数据提交的url地址
- method：表单提交的方式。GET、POST
三.CSS
CSS引入方式
行内样式：写在标签的style属性中（不推荐）
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）
CSS选择器
元素选择器：标签名 {属性值 … }
id选择器：#id { … }
类选择器：.class { … }
优先级：id选择器 > 类选择器 > 元素选择器（范围越小优先级越高）
CSS属性
color：设置文本的颜色
text-decoration：规定添加到文本的修饰（none表示定义标准的文本，可去除a元素自带下划线）
font-size：字体大小 （注意：记得加px）
line-height：设置行高
text-indent：定义第一个行内容的缩进量（在HTML中无论输入多少个空格，只会显示一个。 可以使用空格占位符： ）
text-align：规定元素中的文本的水平对齐方式（居中，靠左，靠右）
width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000
padding：内边距
margin：外边距
(注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right)
四.盒子模型
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
五.两个案例
案例一 新闻
错误点
div块级元素，独占一行，span行内级元素
用text-align对span内文字没有效果（可通过将其包裹在p/div标签里再设置p/div标签），只对块级元素有效，对行内元素无效
<!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>
a{
/* 取消下划线 */
text-decoration:none;
color:black;
}
#center{
width: 65%;
margin:0 auto;
/* 居中 */
}
.hui
{
color: #4D4f53;
}
#time
{
color: #968D92;
font-size: 13px;
}
p{
/* 首行缩进量 */
text-indent: 35px;
/* 行高 */
line-height: 40px;
/* 空格  */
}
#past{
text-align: right;
}
</style>
</head>
<body>
<div id="center">
<img src="img/news_logo.png" alt="">
<a href="http://gov.sina.com.cn/">新浪</a>> 正文
<br>
<h1 class="hui">焦点访谈</h1>
<hr>
<span id="time">2023年03月02日 21:50 </span>
<span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">央视网</a></span>
<hr>
<video src="video/1.mp4"controls width="950"></video>
<!-- 音频
<audio src="audio/1.mp3" controls></audio> -->
<p><b>央视网消息 </b>（焦点访谈）：连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p>
<p>人勤春来早， 春耕农事忙。立春之后，由南到北，春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
<img src="img/1.jpg" alt="">
<p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p>
<img src="img/2.jpg" alt="">
<p>我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。</p>
<div id="past">责任编辑：王树淼 SN242</div>
</div>
</body>
</html>案例二 表格
th表头，自动居中加粗
<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="img/huawei.jpg" width="100px"></img></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td> <img src="img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>案例三 表单项
注意点：
- <label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
2..必须这该组的Raido 的name属性赋值，该组中的单选按钮才能被选中
<!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>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="post">
姓名: <input type="text" name="name"><br><br>
密码: <input type="password" name="password"><br><br>
性别:<label><input type="radio" name="1" value="1">男</label>
<label><input type="radio" name="1" 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"><br><br>
生日:<input type="date"><br><br>
时间:<input type="time"><br><br>
日期时间:<input type="datetime-local"><br><br>
邮箱:<input type="email"><br><br>
年龄:<input type="number"><br><br>
学历:<select>
<option value="">----------- 请选择 -----------</option><br><br>
<option value="1">肇专</option><br><br>
<option value="2">本科</option><br><br>
<option value="3">硕士</option><br><br>
<option value="4">博士</option><br><br>
</select><br><br>
描述:<textarea cols="30" rows="10">
</textarea><br><br>
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</body>
</html>
1275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
