Document

2.HTML、CSS

2023-08-20
dfer
402
html css 前端 CSDN

文章目录

1.什么是HTML、CSS
2.HTML的语法特点
3.HTML的快速体验
4.开发工具推荐：VS Code
5.基本标签&样式
表格、表单标签
- 表格标签
- 表单标签

1.什么是HTML、CSS

HTML即超文本标记语言：

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以i当以图片、音频、视频等内容

标记语言：由标签构成的语言

HTML标签都是预定义好的。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS

CSS：层叠样式表，用于控制页面的样式（表现）。
官方文档网址：w3school 在线教程

2.HTML的语法特点

html中的标签不区分大小写
html的标签属性值使用单引号或双引号均可
html的语法结构比较松散

3.HTML的快速体验

新建文本文件，后缀名改为.html
编写html结构标签
在<body>中填写内容

示例代码

<html>
	<head>
		<title>标题（头）</title>
	</head>

	<body>
		身体
	</body>


</html>

4.开发工具推荐：VS Code

安装步骤网上很容易找到

5.基本标签&样式

5.1.标题

5.1.1.标题排版

图片标签：<img>
src:指定图片的url（绝对路径/相对路径）

width:图像的宽度（px像素/%相对于父元素的百分比）

height:图像的高度（px像素/%相对于父元素的百分比）

一般width或height只设置一个，另外一个会等比例缩放

路径的书写方式：
绝对路径：

1.绝对磁盘路径

2.绝对网络路径：在浏览器中右键图片->在新标签页中打开图像（得保证互联网上有这张图片，并且保证打开的时候是联网的

相对路径（推荐写法）：
./：当前目录，可以省略

../：上一级目录，不可以省略
```
<img src="./img/news_logo.png" width="300px" height="100px" >
```
标题标签：<h1> - <h6>
水平线标签：<hr>
没有任何意义的标签：<span>
- 该标签是一个在开发网页时会大量用到的没有语义的布局标签
- 特点：一行可以显示多个（组合行内元素），宽度和高度由内容撑开

5.1.2.标题样式

CSS引入方式：
行内样式：写在标签的style属性中（不推荐）
```
<h1 style="..." >
</h1>
```
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中
```
<style>...</style>
```
外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

.css <link href>

颜色的表示形式

表示方式	表示含义	取值
关键字	预定义的颜色名	red,green,blue(这三种颜色是三原色)
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)
十六进制表示法	`#`开头，将数字转换称十六进制表示	#000000,#ff0000,#cccccc,简写：#000，#ccc

CSS选择器：用来选取需要设置样式的元素（标签）

元素选择器

元素名称 {
    color: red;
}

<元素名称>要设置的元素</元素名称>

id选择器

#id属性值 {
    color:red;
}

<元素名称 指定id >要设置的元素</元素名称>

类选择器

.class {
    color: red;
}

<元素名称 指定类别class>要修改的元素</元素名称>

优先级：id选择器 > 类选择器 > 元素选择器

css属性：
- color：设置文本的颜色
- font-size：字体大小（注意：得加px）

5.1.3.超链接

标签：

<a href="..." target="..." >名称</a>

属性：
- href：指定资源访问的url
- target：指定在何处打开资源链接：
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开
CSS属性：
- text-decoration：规定添加到文本的修饰，none表示定义标准的文本
- color：定义文本的颜色

5.2.正文

5.2.1.正文排版

视频标签：<video>
- src:规定视频的url
- controls:显示播放的控件
- width:播放器的宽度
- height:播放器的高度
音频标签：<audio>
- src：规定音频的url
- controls：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
换行标签：<br>
CSS样式
- line-height：设置行高
- text-indent：定义第一个行内容的缩进
- text-align：规定元素中的文本的水平对齐方式
注意
- 在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：

5.2.2.页面布局

盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型的组成（从内向外）：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
布局标签：在实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
标签：<div>、<span>
特点：
- div标签
  - 一行只显示一个(独占一行)
  - 宽度默认是父元素的宽度，高度默认由内容撑开
  - 可以设置宽高(width, height)
- span标签
  - 一行可以显示多个
  - 宽度和高度默认由内容撑开
  - 不可以设置宽高(width, height)
CSS属性
- width：设置宽度
- height：设置高度
- border：设置边框属性
- padding：内边距
- margin：外边距
- 注意：
  - 如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-left

表格、表单标签

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据
标签：

标签	描述	属性/备注
`<table>`	定义表格整体，可以包裹多个`<tr>`	`border`：规定表格边框的宽度 `width`：规定表格的宽度 `cellspacing`:规定单元之间的空间
`<tr>`	表格的行，可以包裹多个`<td>`
`<td>`	表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为`<th>`,这个`th`标签有加粗居中的效果

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：<form>
表单项：不同类型的input元素、下拉列表、文本域等。
- <input>:定义表单项，通过type属性控制输入形式
  - type取值：
    1. text：默认值，定义单行的输入字段
    2. password：定义密码字段
    3. radio：定义单选按钮
    4. checkbox：定义复选框
    5. file：定义文件上传按钮
    6. data/time/datatime-local：定义日期/时间/日期时间
    7. number：定义数字输入框
    8. email：定义邮件输入框
    9. hidden：定义隐藏域
    10. submit/reset/button：定义提交按钮/重置按钮/可点击按钮
- <select>:定义下拉列表，<option>定义列表项
- <textarea>:定义文本域
属性：
- action:规定当提交表单时项何处发送表单数据，URL。如果不指定，默认提交到当前页面
- method:规定用于发送表单数据的方式。GET、POST
  - get:在url后面拼接表单数据，比如：?username=12&age=213，url长度有限制（大小有限制），默认值
  - post：在消息体（请求体）中传递的，参数大小无限制的
- 注意：表单项必须有name属性才可以提交

<!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="like" value="1">Java</label>
        <label><input type="checkbox" name="like" value="2">C++</label>
        <label><input type="checkbox" name="like" value="3">Python</label>
        <label><input type="checkbox" name="like" value="4">c语言</label><br><br>
        文件：<input type="file" name="file"> <br><br>
        生日：<input type="date" name="birthday"> <br><br>
        时间：<input type="time" name="time"> <br><br>
        日期时间：<input type="datetime-local" name="datatime"> <br><br>
        邮箱：<input type="email" name="email"> <br><br>
        电话：<input type="number" name="phonenumber"> <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="可点击按钮"> &nbsp;&nbsp;
        <input type="reset" value="重置按钮">&nbsp;&nbsp;
        <input type="submit" value="提交按钮">
    </form>
</body>

</html>

上一篇： Nginx 解决ap

下一篇： html&CSS--