HTML、CSS快速入门

最新推荐文章于 2024-06-12 19:53:28 发布

摘星2312

最新推荐文章于 2024-06-12 19:53:28 发布

阅读量181

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/wocao_666/article/details/130796093

版权

介绍

HTML(HyperText Markup Language)：超文本标记语言：

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

如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。
标记语言：由标签构成的语言

之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码，如下

可以看到如下内容，就是由一个一个的标签组成的

这些标签不像XML那样可以自定义，==HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，==然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的 a 标签等。

W3C标准：

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

结构：对应的是 HTML 语言
表现：对应的是 CSS 语言
行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

快速入门

1.新建文本文件，后缀名改为 .html/.htm

2.编写 HTML结构标签

3.在中使用

定义标题字体

4.使用标签定义图片

5.保存后，使用浏览器打开该文件

标签	描述
<HTML>	定义 HTML 文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体

基础标签

标签	描述
<h1> ~ <h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href：指定访问资源的URL
target：指定打开资源的方式
- _self:默认值，在当前页面打开
  - _blank：在空白页面打开

列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type：设置符号的类型

表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：设置符号的类型
- table：定义表格
  - width：宽度
  - border：边框
  - cellpadding：定义内容和单元格的距离
  - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
  - bgcolor：背景色
  - align：对齐方式
- tr：定义行
  - bgcolor：背景色
  - align：对齐方式
- td：定义单元格
  - colspan：合并列
  - rowspan：合并行
- th：定义表头单元格
- ：表格标题

布局标签

标签	描述
<div>	定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>	用于组合行内元素。

表单标签

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL

以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式

method取值有如下两种：
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

type取值

type 取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

概述

==CSS 是一门语言，用于控制网页表现。==我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：

结构：HTML
表现：CSS
行为：JavaScript

CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

如下面的代码， style 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>Hello CSS~</div>
</body>
</html>