当前位置：首页 > news >正文

HTML+CSS

news 来源：原创 2025/5/3 4:53:54

HTML+CSS

HTML文件后缀为.html

首先html有固定的基本结构

<html>
     <head>
          <title>HTML 快速入门</title>
     </head>
     <body>
				<h1>Hello HTML</h1>
        <img src="img/1.png">
     </body>
</html>

其中<html>是根标签，<head>和<body>是子标签。

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。
<title>中定义标题显示在浏览器的标题位置

HTML中的标签特点

HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

前端网页制作

标题部分

前面我们提到，我们在浏览器中看到的网页程序呈现出来的效果，实际上是浏览器解析并渲染了前端代码而呈现出来的。而我们所编写的HTML页面，在浏览器中渲染的时候，是从上往下逐行解析展示的。所以，我们在编写html页面的时候，要根据页面的布局，从上往下编写。

<!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>

  <!-- 定义网页标题, 标题内容：  -->
  <h1 id="title"></h1>
  
  <!-- 定义一个超链接, 链接地址：, 链接内容：央视网 -->
  <a href="" target="_blank">央视网</a>
  2024年05月15日 20:07
  
</body>
</html>

一个是标题标签 <h1></h1>，另一个是超链接标题 <a></a>

h1-h6代表标题大小 h1为一级标题

标签：央视网

属性：

href: 指定资源访问的url
target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开

标题样式

那接下来，我们要来控制字体的颜色，而这部分其实是属于网页的样式，所以这里呢，就要通过CSS样式控制。比如说我想改变日期的颜色

  <style>
    .publish-date {
      color: gray;
    }
  </style>
  ...
    <span class="publish-date">2024年05月15日 20:07</span>

CSS的三种引入方式语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对。
内部样式	定义
外部样式	定义标签，通过href属性引入外部css文件

对于上述3种引入方式，企业开发的使用情况如下：

**行内样式：**会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
**内部样式：**通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
**外部样式：**html和css实现了完全的分离，企业开发常用方式。

css选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。

对于css选择器，我们只学习常见的这几种：

选择器	写法	示例	示例说明
元素选择器	元素名称 {…}	h1 {…}	选择页面上所有的标签
类选择器	.class属性值 {…}	.cls {…}	选择页面上所有class属性为cls的标签
id选择器	#id属性值 {…}	#hid {…}	选择页面上id属性为hid的标签
分组选择器	选择器1,选择器2{…}	h1,h2 {…}	选择页面上所有的和标签
属性选择器	元素名称[属性] {…}	input[type] {…}	选择页面上有type属性的标签
	元素名称[属性名=“值”] {…}	input[type=“text”] {…}	选择页面上type属性为text的标签
后代选择器	元素1元素2{…}	form input {…}	选择标签内的所有标签

那接下来，我们需要将页面上所有的超链接中，默认的下划线效果去除掉。

常见标签

那在上述的正文排版中，用到了如下标签，接下来详解介绍一下：

标签	作用	属性/说明
	视频标签	src：指定视频的url（绝对路径/相对路径）
		controls：是否显示播放控件
		width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
		height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
	图片标签	src, width，height
	段落标签
	换行标签
/	加粗	具有强调语义
/	下划线	具有强调语义
/	倾斜	具有强调语义
/	~~删除线~~	~~具有强调语义~~

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：

字符实体	属性/说明
	空格
<	<
>	>

路径表示

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：

绝对路径:
- 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
- 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:

./ : 当前目录 , ./ 可以省略的

…/: 上一级目录

布局

完成了标签及正文部分的排版制作，以及样式处理之后，那最后一步，我们就要来完成页面整体布局的设置了。从原始的央视新闻页面中，我们可以看到，新闻页面是出于整个版面的正中心的，那这种呢，在布局中也称为 版心居中。

先来看看代码实现


    /* 新增样式 */
    .news-content {
      width: 70%; /* 宽度占70% */
      margin: 0 auto; /* 横向居中 */
    }
        <!-- 包裹新闻内容的容器 -->
    <div class="news-content">
    </div>

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。

布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

flex布局

flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
通过给父容器添加flex属性,来控制子元素的位置和排列方式。
flex布局相关的CSS样式：

属性	说明	取值	含义
display	模式	flex	使用flex布局
flex-direction	设置主轴	row	主轴方向为x轴，水平向右。（默认）
		column	主轴方向为y轴，垂直向下。
justify-content	子元素在主轴上的对齐方式	flex-start	从头开始排列
		flex-end	从尾部开始排列
		center	在主轴居中对齐
		space-around	平分剩余空间
		space-between	先两边贴边，再平分剩余空间

如果主轴设置为row，其实就是横向布局。主轴设置为column，其实就是纵向布局。

表单标签

那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单。当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交，那其实这个数据呢，一般会提交到服务端，最终保存在数据库中。

而表单是一项一项的，这个我们称为表单项或表单元素。

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

<!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="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>
        
</body>
</html>

URL（统一资源定位符），俗称“网址”，是互联网上用于标识和定位资源的标准地址。
它指明了资源的位置以及如何访问该资源。
每个有效的 URL 都指向一个唯一的资源。

Mozilla 开发者网

一个典型的 URL 由以下部分组成：

协议（Scheme）：指示访问资源所使用的协议，如 http、https、ftp 等。
主机名（Host）：资源所在的服务器地址，通常是域名，如 www.example.com。
端口号（Port）：服务器的端口，默认为 80（HTTP）或 443（HTTPS），通常可以省略。
路径（Path）：服务器上资源的具体位置，如 /path/to/resource。
查询参数（Query）：以 ? 开始，包含键值对，用于传递参数，如 ?id=123&name=Tom。
片段标识符（Fragment）：以 # 开始，指示资源的特定部分，如 #section1。

例如，https://www.example.com:443/path/to/resource?id=123&name=Tom#section1，其中：

https：协议
www.example.com：主机名
443：端口号
/path/to/resource：路径
id=123&name=Tom：查询参数
section1：片段标识符

URL 是互联网的基础，浏览器通过解析 URL 来定位和访问网页或其他资源。
它使得用户能够通过易于理解和记忆的地址访问各种网络资源。

注意事项：

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

用户名: <input type="text" name="username">

表单项标签

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项 , 通过type属性控制输入形式。

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域

表格标签

标签	描述
table	定义表格整体
thead	用于定义表格头部(可选)
tbody	定义表格中的主体部分(可选)
tr	表格的行，可以包裹多个 td
td	表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 th