Wed前端入门——HTML、CSS
一般的页面有HTML、CSS以及JavaScript组成
- HTML定义了页面的结构和内容，包括文本、图像、链接等等
- CSS用于定义页面的布局和样式
- JS用于添加交互性和动态功能作用
一、HTML
基本格式：
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<!-- 文档语言为English -->
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML属性</title>
</head>
<body></body>
</html>
HTML（超文本标记语言）是一种标准标记语言，用于创建和设计网页。它通过使用各种标签（称为“元素”）来定义网页的结构和内容。以下是一些关于HTML的基本要点：
1. 结构
HTML文档通常包括以下几个部分：
- 文档类型声明：指明文档的版本（如
<!DOCTYPE html>）。 - HTML元素：整个文档被包裹在
<html>标签内。 - 头部（Head）：包含文档的元数据，如标题、样式和脚本，位于
<head>标签内。 - 主体（Body）：包含网页的实际内容，位于
<body>标签内。
2. 标签
HTML使用成对的标签来标识内容。例如：
<h1>到<h6>：用于标题。<p>：用于段落。<a>：用于链接。<img>：用于插入图像。
3. 属性
标签可以有属性，以提供额外的信息。例如：
<a href="https://www.example.com">访问示例网站</a>
在这里，href是一个属性，定义了链接的目标。
4. 嵌套
HTML元素可以嵌套在其他元素内，从而形成复杂的网页结构。例如：
<div><h1>欢迎来到我的网站</h1><p>这是一个段落。</p>
</div>
5. 语义化
现代HTML强调语义化，使用特定的元素来更准确地描述内容的含义，例如：
<header>：用于页面头部。<footer>：用于页面底部。<article>：用于独立的内容块。
6. 可访问性
良好的HTML结构有助于提高网页的可访问性，使得屏幕阅读器等辅助技术能够更好地理解网页内容。
HTML的表单和表格：
表单：
一个典型的 HTML 表单通常包含以下几个主要部分：
-
<form>标签：- 定义表单的开始和结束。
- 包含属性，如
action（提交数据的目标 URL）和method（数据提交的方式，通常是GET或POST）。
<form action="/submit" method="POST"><!-- 表单控件 --> </form>action属性为空，意味着表单会提交到当前页面。 -
表单控件：
- 输入框 (
<input>)：用于接收用户输入。可以有不同的类型，如文本框、密码框、复选框等。 - 文本区域 (
<textarea>)：用于输入多行文本。 - 选择框 (
<select>)：下拉列表，用户可以选择一个或多个选项。 - 按钮 (
<button>或<input type="submit">)：用于提交表单。 - 单选(
<radio>)或多选(<checkbox>)：用于单选和多选。
<input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><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> 性别：<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 type="time" name = "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> 描述：<textarea name="description" cols = "30" rows = "10"></textarea><br><br> 隐藏：<input type="hidden" name = "id" value = "1"> <br><input type="submit" value="提交"> - 输入框 (
-
标签 (
<label>)：- 为表单控件提供描述，提升可用性和可访问性。
<label for="username">用户名:</label> //for后面是绑定元素的id <input type="text" id="username" name="username"> // 也可以直接包裹 <label>用户名：<input type="text" name="username" placeholder="用户名"></label>
此时点击label元素可直接跳转到所绑定的组件中
表单的基本示例
<form action="/submit" method="POST"><label for="username">用户名:</label><input type="text" id="username" name="username" required><label for="password">密码:</label><input type="password" id="password" name="password" required><input type="submit" value="登录">
</form>
表单的功能
- 数据验证：HTML5 提供了一些内置的验证功能，例如
required属性，可以确保用户填写必填项。 - 用户体验：使用多个控件和输入类型，可以改善用户输入的体验，例如使用日期选择器。
- 提交方式：
GET方法将表单数据附加到 URL，适合于非敏感数据；POST方法将数据发送到服务器，适合于敏感信息。
表格：
HTML 表格用于以行和列的形式组织和显示数据。表格在展示各种信息时非常有效，例如财务数据、时间表、统计数据等。
表格的基本结构
一个基本的 HTML 表格使用 <table> 标签，包含以下主要组件：
<table>：定义表格的开始和结束。<tr>（表格行）：用于定义表格中的一行。<th>（表头单元格）：用于定义表格的表头，通常为粗体并居中。<td>（表格单元格）：用于定义表格中的普通单元格。
示例代码
以下是一个简单的表格示例：
<table border="1"><caption>学生成绩表</caption><thead><tr><th>姓名</th><th>数学</th><th>英语</th><th>科学</th></tr></thead><tbody><tr><td>张三</td><td>85</td><td>90</td><td>88</td></tr><tr><td>李四</td><td>78</td><td>82</td><td>80</td></tr></tbody>
</table>
组件解析
<table>：开始和结束表格的标签。<caption>：可选的，为表格提供标题。<thead>：定义表格的表头部分。<tbody>：定义表格的主体部分，这里包含实际的数据行。<tr>：定义表格的行。<th>：定义表头单元格，通常用于列标题。<td>：定义普通单元格，存放实际数据。
表格的属性
border：用于设置表格边框的宽度（如border="1"）。cellpadding：设置单元格内边距。cellspacing：设置单元格之间的间距。
CSS 样式
可以使用 CSS 来美化表格，例如设置边框、颜色、字体等：
table {width: 100%;border-collapse: collapse; /* 合并边框 */
}th, td {border: 1px solid #ddd; /* 设置边框 */padding: 8px; /* 设置内边距 */text-align: left; /* 左对齐 */
}th {background-color: #f2f2f2; /* 表头背景色 */
}
总结
- HTML 表格通过
<table>、<tr>、<th>和<td>标签组织和显示数据。 - 表格在展示数据时非常有效，适用于许多场景。
- 可以使用 CSS 来增强表格的外观和可读性。
二、CSS
1.CSS引入方式：
- 行内样式：写在标签的style属性中（不推荐）
<h1 style = "color: red">中国新闻网
</h1>
- 内嵌样式：写在style标签中（可以写在页面的任何位置，但通常约定写在head标签中）
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><style>h1 {color: red;}</style>
</head>
- 外联样式：写在一个单独的.css文件中（需要通过
link标签在网页中引入）
CSS文件：
h1 {color: red;
}
html文件：
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><link rel = "stylesheet" href = "css/news.css">
</head>
2.颜色表示形式：
| 表示方式 | 表示含义 | 取值 |
|---|---|---|
| 关键字 | 预定义的颜色名 | red、green、blue… |
| rgb表示法 | 红绿蓝三原色，每项取值范围：0~255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)… |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 | #000000、#ff0000、#cccccc，简写：#000、#ccc |
3.使用CSS操作特定组件时：
- 可以通过行内样式直接操作
- 使用外联样式和内嵌样式
通过三种选择器操作（元素选择器、类选择器和 ID 选择器）
<style>/* 元素选择器 */span {color: #968d92;}/* 类选择器 可以共用一个类 */.cla {color: #968d92;}/* id选择器 id是唯一的 不能共用 */#ii {color: #968d92;font-size: 20px;}/* 三种选择器的优先级：id选择器 > 类选择器 > 元素选择器 */</style>
4.盒子模型：
盒子模型的组成部分
每个元素的盒子模型由以下四个部分组成，从内到外依次为：
-
内容（Content）：
- 这是元素的实际内容，如文本、图像等。
- 内容的尺寸由
width和height属性决定。
-
内边距（Padding）：
- 内边距是元素内容与边框之间的空间，用于增加内容的可读性。
- 内边距的大小可以通过
padding属性设置。内边距可以为每个方向单独设置（上、右、下、左）或统一设置。
padding: 10px; /* 所有方向统一设置为 10px */ padding: 5px 10px; /* 上下 5px，左右 10px */ -
边框（Border）：
- 边框围绕着内边距和内容，定义了元素的边界。
- 可以通过
border属性设置边框的样式、宽度和颜色。
border: 2px solid black; /* 2px 宽的黑色实线边框 */ -
外边距（Margin）：
- 外边距是元素与其他元素之间的空间，用于控制元素之间的距离。
- 外边距的大小可以通过
margin属性设置。外边距也可以为每个方向单独设置或统一设置。
margin: 20px; /* 所有方向统一设置为 20px */
示例代码：
<!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; /*指定width height为盒子的高宽*/background-color: rgb(86, 201, 162);padding: 20px; /* 内边距： 上 右 下 左 ，若一样的话则写一个即可*/border: 10px solid red; /* 边框： 宽度 线条类型 颜色 */margin: 30px; /* 外边距： 上 右 下 左 ，若一样的话则写一个即可*/}</style>
</head>
<body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</body>
</html>
若要将div中的内容居中则
<style>div {width: 65%; /* 宽度为主屏幕的65% *//* box-sizing: border-box; */margin: 0 auto; /* 两个值时会将这两个值依次对应 上 右 下 左 其中auto是让计算机自己计算 */text-align: center; /* 文本居中 */}</style>
