HTML-CSS
HTML快速入门
新鲜看点
标题
排版
样式
方式一
方式二和方式三
颜色表示形式
CSS选择器
超链接
正文
排版
页面
实验过程及结果记录
源代码
实验结果
标签
表格标签
表单标签
表单项
HTML快速入门
1.新建文本文件，后缀名改为.html
2.编写 HTML 结构标签
3.在<body>中填写内容
1.HTML结构标签
<html>
<head>
<title>标题</title></head>
<body>
</body>
</html>2.特点
HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散
新鲜看点
标题
排版
图片标签:<img>
src:指定图像的url(绝对路径/相对路径)width:图像的宽度(像素/相对于父元素的百分比)
height:图像的高度(像素/相对于父元素的百分比)
标题标签:<h1>-<h6>
水平线标签:<hr>
每次修改完页面都要ctrl+s保存，才可刷新网页
样式
方式一
行内样式
<hl style="color: red;">努力学习编程</h1>
直接写在body标签范围内
方式二和方式三
其中方式三需要创建一个css文件
颜色表示形式
CSS选择器
用来选取需要设置样式的元素(标签)
以下三个优先级依次增高
元素选择器
span {
color: red;
}
类选择器
.cls {
color: green;
}
ID选择器
#time{
color: #968D92;
}
要先给想变颜色的字用span标签标记，并命名class和id
例如：
超链接
1.超链接
标签:<a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
self:默认值，在当前页面打开blank:在空白页面打开
2.CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本color:定义文本的颜色
正文
排版
1.音频、视频标签
<audio> <video>
2.换行、段落标签
换行:<br>;段落:<p>
3.文本加粗标签
<strong>
CSS样式4.line-height:设置行高
text-indent:定义第一个行内容的缩进text-align:规定元素中的文本的水平对齐方式
5.注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符:
页面
布局标签:实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:
div标签:
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高(width、height)span标签:
一行可以显示多个
宽度和高度默认由内容撑开.
不可以设置宽高(width、height)
marge:0 auto; 0代表上下，auto浏览器自动计算左右
CSS盒子模型
组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
CSS属性
width:设置宽度
height:设置高度
border:设置边框的属性，如:1px solid #000;
padding:内边距
margin:外边距
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right ...
实验过程及结果记录
源代码
<!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>
h1 {
color: #4d4f53;
}
#time {
color: #968d92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 40px;
}
#plast {
text-align: right;
}
#center {
width: 65%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="center">
<img src="img\news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪新闻</a>>正文
<h1>吃得饱饭</h1>
<hr>
<span id="time">2023年03月02日 21：50</span> <span><a href="https://news.cctv.com/" target="_blank">央视网</a></span>
<hr>
<video src="video\1.mp4" controls width="950px"></video>
<P>
<strong>重磅消息消息</strong>(焦点访谈):******
</p>
<P>
人勤春来早，春耕农事忙。立春之后，由南到北，春天的田野处处生机盎然。
</P>
<img src="img\1.jpg">
<p>
******
</p>
<img src="img\2.jpg">
<p>
******
</p>
<p id="plast">
责任编辑:******
</p>
</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="img\huawei.jpg" width="100px"></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>
</html> 刷新网页
表单标签
表单标签:<form>
表单属性:
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面，?username=java,大小有限制post:表单数据在请求体中携带，大小没有限制
注意:表单项必须有name属性才可以提交
表单项
