HTML和CSS快速入门

发布于：2025-07-21 ⋅ 阅读:(13) ⋅ 点赞:(0)

目录

1. HTML

1.1 HTML简介

1.2 HTML基础 - 4个实例

1.3 HTML元素

1.4 HTML属性

1.5 HTML常见标签 

1.5.1 标题标签h1-h6

1.5.2 段落标签p 

1.5.3 换行标签br

1.5.4 图片标签img

1.5.5 超链接a

 1.5.6 表格标签

1.5.7 表单标签

1.5.8 无语意标签div&span

1.6综合练习-用户注册

2. CSS

2.1 CSS介绍

2.1.1 CSS语法

2.1.2 引入方式

2.2 CSS选择器

2.3 常用CSS样式 

2.3.1 color

 2.3.2 font-size

2.3.3 border

2.3.4 width/height

2.3.5 padding

2.3.6 margin

1. HTML

1.1 HTML简介

什么是HTML?

  • HTML是HyperText Markup Language的简写，表示超文本标记语言,
    超文本：比文本要强大.通过链接和交互式方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等.
  • HTML并不是一个种编程语言，而是一种标签语言
  • HTML的文档也叫web页面
  • HTML使用标记标签来描述网页

  • HTML文档的后缀名: .html .htm

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML元素 

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

 HTML结构

  • HTML代码是由标签组成的,大多数标签都是双标签成对出现的结构，只有少数标签是单标签 
    <body>hello world </body>
  • 开始标签和结束标签之间，写的是标签的内容，开始标签中可能会带有"属性”.id属性相当于给这个标签设置了一个唯一的标识符(身份证号码). 
    <body id = "my_id"> hello world </body>

基本结构

只有body才会在浏览器中显示
 

<html >
<head>
    <title>第一个页面</title>
</head>
<body>
    hello world
</body>
</html>

1.2 HTML基础 - 4个实例

  1. 标题 
    <h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
  2. 段落 
    <p>这是一个段落。</p>
<p>这是另外一个段落。</p>
  3. 链接 
    <a href="https://www.baidu.com">这是一个链接</a>
  4. 图像 
    <img src="/images/logo.png" width="258" height="39" />

1.3 HTML元素

开始标签  元素内容 结束标签 
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行
元素语法:
  • HTML 元素以开始标签起始,结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

1.4 HTML属性

属性是 HTML 元素提供的附加信息。

属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。

HTML属性参考手册:HTML 标签列表(字母排序) | 菜鸟教程HTML 参考手册- (HTML5 标准) 按字母顺序排列 New : HTML5新标签 标签 描述 <!--...--> 定义注释 <!DOCTYPE> 定义文档类型 <a> 定义超文本链接 <abbr> 定义缩写 <acronym> 定义只取首字母的缩写，不支持H..https://www.runoob.com/tags/html-reference.html


全局属性(所有HTML均可使用的属性)

  • id：为元素指定唯一的标识符。
  • class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
  • style：用于直接在元素上应用 CSS 样式。
  • title：为元素提供额外的提示信息，通常在鼠标悬停时显示。
  • data-*：用于存储自定义数据，通常通过 JavaScript 访问。

1.5 HTML常见标签 

1.5.1 标题标签h1-h6

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

1.5.2 段落标签p 

p标签表示一个段落

<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>
  • p标签描述的段落，前面没有缩进.(未来CSS会学)
  • 自动根据浏览器宽度来决定排版。
  • html内容首尾处的换行，空格均无效.
  • 在html中文字之间输入的多个空格只相当于一个空格.
  • html中直接输入换行不会真的换行，而是相当于一个空格。

1.5.3 换行标签br

换行标签1<br/>
换行标签2<br/>
换行标签3<br/>
  • 想要完成换行的话，也可以通过<br/>标签来实现
  • br是break的缩写.表示换行.
  • br是一个单标签（不需要结束标签)
  • br标签不像p标签那样带有一个很大的空隙.
  • <br/>是规范写法.不建议写成<br>

br标签和p标签的区别

1.5.4 图片标签img

img标签必须带有 src属性.表示图片的路径.

图片和html文件要在同级目录下

<img src="1.png" alt="该图片无法显示" width="800px" height="500px">
  • alt属性用来为图像定义一串预备的可替换的文本替换文本属性的值是用户定义的,当图片路径有问题则该属性生效
  • height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。(属性值默认为像素) 

关于目录结构

  • 相对路径:以html所在路径为基准找到图片位置
    同级路径直接写文件名称即可(或./)
    下一级路径:用 / 连接文件夹名和文件名，比如 文件夹名/文件名 
    <img src="1.png" alt="示例">  
<!-- 或者写成 <img src="./1.png" alt="示例"> ，效果一样 -->  

<img src="image/2.jpg" alt="示例">
  • 绝对路径:一个完整的磁盘路径或网络路径 
    <img src="../2.png" alt="示例图片2" width="1000px" height="500px" border="5px"><br>
<img src="https://pic.rmb.bdstatic.com/bjh/bb8d09e8ad2/241023/40be20175f5150b230fb47fa2a3c65a1.png?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_27,text_QOm4v-mbgeeVheiwiA==,size_27,x_21,y_21,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1" alt="示例图片3" width="1000px" height="500px" border="5px"><br>

1.5.5 超链接a

  • href:必须具备，表示点击后会跳转到哪个页面，
    target:打开方式.默认是_self.如果是_blank则用新的标签页打开. 
<a href="https://baidu.com" target="_blank">百度</a>

链接的几种形式:

  1. 外部链接:引用其它网站地址
  2. 内部链接:网站内部页面之间的链接(写相对路径即可)
  3. 空链接:使用#再href中占位

 1.5.6 表格标签

HTML 表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。
  • <thead > :用于定义表格的标题部分
  • <tbody > 用于定义表格的主体部分

表格标签常见属性

(可以用于设置大小边框等.但是一般使用CSS方式来设置)
这些属性都要放到 table标签中。  注意,这几个属性，vscode都提示不出来

  • align是表格相对于周围元素的对齐方式.align="center"(不是内部元素的对齐方式）
  • border表示边框.1表示有边框(数字越大，边框越粗)，""表示没边框
  • cellpadding:内容距离边框的距离，默认1像素
  • cellspacing:单元格之间的距离. 默认为2像素
  • width /height:设置尺寸.

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1,列1</td>
      <td>行1,列2</td>
      <td>行1,列3</td>
    </tr>
    <tr>
      <td>行2,列1</td>
      <td>行2,列2</td>
      <td>行2,列3</td>
    </tr>
  </tbody>
</table>

1.5.7 表单标签

表单是让用户输入信息的重要途径

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
  • <label> 元素用于为表单元素添加标签，提高可访问性(通常使用id属性关联)。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

分成两个部分：

  1. 表单域：包含表单元素的区域.重点是form标签，
  2. 表单控件:输入框，提交按钮等.重点是input标签. 

form标签

描述了要把数据按照什么方式，提交到哪个页面中

<form action=""></form>

input标签

各种输入控件，单行文本框，按钮，单选框，复选框。

  • type(必须有),取值种类很多, button,checkbox, text,file, image, password, radio等.
  • name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选一.
  • value: input 中的默认值.
  • checked:默认被选中.(用于单选按钮和多选按钮)

下拉标签select:<select> 元素用来创建下拉列表。

  • <select> 元素中的 <option> 标签定义了列表中的可用选项。

    option中定义selected="selected"表示默认选中

  • disabled:禁用该选项，使其无法被用户选中。用户只能看到这个提示，但不能将其作为有效选项提交。
  • selected:默认选中该选项。页面加载时，下拉框会显示 “请选择国家” 作为初始文本。 
    <select name="country">
  <option value="" disabled selected>请选择国家</option>
  <option value="China">中国</option>
  <option value="USA">美国</option>
  <option value="UK">英国</option>
  <option value="Japan">日本</option>
</select>
  • 文本框标签 textarea 
    <textarea rows="10" cols="30">
我是一个文本框。 
</textarea>
    标签 描述
    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义了 <input> 元素的标签，一般为输入标题
    <select> 定义了下拉选项列表
    <option> 定义下拉列表中的选项
    <button> 定义一个点击按钮

常用的输入类型:

  • 文本域:文本域通过 <input type="text"> 标签来设定
    当用户要在表单中键入字母、数字等内容时，就会用到文本域。 
    <form>
用户名:<input type="text" name = username><br>
密码:<input type="text" name = password>
</form>

  • 密码字段:密码字段通过标签 <input type="password"> 来定义:

    <form>
Password: <input type="password" name="pwd">
</form>

  • 单选按钮:<input type="radio"> 标签定义了表单的单选框选项

    <form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female" checked="checked">女
</form>


    有 value 的情况：选 “男”，提交的数据是 sex=male；选 “女”，是 sex=female 。后端能用 male / female 区分性别。
    checked="checked" 会让 “女” 在页面刚加载时就被选中，不用用户手动点。如果没这个属性，两个单选框默认都是未选中状态。

  • 复选框:<input type="checkbox"> 定义了复选框。

    复选框可以选取一个或多个选项：

    <input type="checkbox" name="vehicle[]" value="Bike">自行车<br>
<input type="checkbox" name="vehicle[]" value="Bus">公交车<br>
<input type="checkbox" name="vehicle[]" value="car">公交车<br>

    name 是表单提交时的参数名，用于后端接收数据。
    [] 语法：告诉后端这是一个数组参数，可以接收多个值（例如用户同时选了 “自行车” 和 “小汽车”）。选中复选框时，对应 value 的值会被提交到服务器。如果没选，则该复选框的值不会被提交。

  • 普通按钮
     

    <input type="button" value="普通按钮" onclick="alert('hello')">

  • 提交按钮:<input type="submit"> 定义了提交按钮。

    当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

    action 属性会对接收到的用户输入数据进行相关的处理

    <form action="Demo3.html" name="input" method="get" target="_blank">
  Username <input type="text" name="user"><br>
  Password <input type="password" name="pwd">
  <input type="submit" value="Submit">
</form>


1.5.8 无语意标签div&span

div标签，division的缩写，含义是分割
span标签，含义是跨度
就是两个盒子.用于网页布局

  • div是独占一行的，是一个大盒子。
  • span不独占一行，是一个小盒子.

1.6综合练习-用户注册

<!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>
  <h1>用户注册</h1>
  <tr>
    <td>用户名:</td>
    <td><input type="text" placeholder="请输入用户名"></td><br>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="password" placeholder="请输入密码"></td>
  </tr>

  <form action="">
    <label>性别:</label>
    <input type="radio" name="sex" value="male" checked="checked">男
    <input type="radio" name="sex" value="female">女<br>

    <input type="checkbox" name="surbscribe" value="订阅">
    <label for="surbscribe">订阅推送消息</label><br>

    <label for="country">国家:</label>
    <select name="country" id="country">
      <option value="CN">中国</option>
      <option value="USA">美国</option>
      <option value="USB">英国</option>
    </select>
    <br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

2. CSS

2.1 CSS介绍

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 

2.1.1 CSS语法

 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。


CSS基本语法规范

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

  • 选择器决定针对谁修改（找谁）
  • 声明决定修改啥.(干啥)
  • 声明的属性是键值对.使用;区分键值对，使用：区分键和值.
<style>
 p {
 /* 设置字体颜⾊ */ 
 color: red;
 /* 设置字体⼤⼩ */ 
 font-size: 30px;
 }
</style>
<p>hello</p>
  • CSS要写到style标签中(后面还会介绍其他写法）
  • style标签可以放到页面任意位置.一般放到head标签内.
  • CSS使用/**/作为注释.(使用ctrl+/快速切换).

2.1.2 引入方式

2.2 CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性

CSS的选择器主要分为以下几种:

  1. 标签选择器:"p"来定义 
    p {
 /* 设置字体颜⾊ */ 
 color: red;
 /* 设置字体⼤⼩ */ 
 font-size: 30px;
 }
  2. class选择器:类选择器以一个点 . 号显示 
    .font32 {
    color: blue;
  }
  3. id选择器:id 选择器以 "#" 来定义。 
    #para1
{
    color:red;
}
  4. 复合选择器 
    <!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>
  /* 空格表示后代 */
  ul li{
    color: blue;
  }
  /* 没空格表示交集 一个标签要同时具备 */
  p#red{
    color: red;
  }
  /* 逗号 表示并集 同时满足 */
  .blue, .green{
    color: brown;
  }
  /* >表示相邻后代,必须是儿子 */
  ul>li>a {
    color: aqua;
  }
</style>
</head>
<body>
  <p>hello</p>
  <p id="red"">hello</p>
  <p class="blue">hello</p>
  <p class="green">hello</p>
  <div class="font32"> class="font32"</div>
  <div class="font32"> class="font32"</div>
  <div><a href="#">我是一个div</a></div>
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li><a href="#">ccc</a></li>
  </ul>
  <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ol>
  <button id="submit">提交</button>
</body>
</html>
  5. 通配符选择器 
    /* 设置⻚⾯所有元素, 颜⾊为红⾊*/ 
* {
 color: red;
}

2.3 常用CSS样式 

<div class="text1">我是⽂本1</div>

2.3.1 color

 color设置字体颜色

.text1{
 color: red;
}

颜色有如下几种表达方式：

  • 英文单词,如red,blue
  • rgb代码的颜色 如rgb(255,0,0)
  • 十六进制的颜色如#ff00ff

 2.3.2 font-size

设置字体大小

.text1{
 font-size: 32px;
}

2.3.3 border

border:边框
边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断

.text1{
 border: 1px solid purple;
}


.text1 {
 border-width: 1px;
 border-style: solid;
 border-color: purple;
}

 以上border属性的对应设置的维度分别为边框粗细，边框样式，边框颜色.
也可以拆开来设置

样式 说明 取值
border-width 设置边框粗细 数值（如 1px、2em 等，用于定义边框的宽度尺寸 ）
border-style 设置边框样式 dotted : 点状
solid : 实线
double : 双线
dashed: 虚线
border-color 设置边框颜色 同 color（可使用颜色名称如 red、十六进制如 #FF0000、RGB 如 rgb(255, 0, 0) 等常见颜色取值方式 ）

2.3.4 width/height

width:设置宽度
height:设置高度


只有块级元素可以设置宽高
块级元素是HTML标签的一种显示模式，对应的还有行内元素
常见块级元素:h1-h6, p,div等
常见行内元素:a span


块级元素独占一行，可以设置宽高
行内元素不独占一行，不能设置宽高


改变显示模式使用display属性可以修改元素的显示模式.
display:block改成块级元素[常用]
display:inline改成行内元素[很少用] 

.text1 {
 width: 200px;
 height: 100px;
}

2.3.5 padding

padding:内边距，设置内容和边框之间的距离.
内容默认是顶着边框来放置的.用padding来控制这个距离

.text1 {
 padding: 20px;
}

padding也是一个复合样式，可以对四个方向分开设置

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

2.3.6 margin

外边距,设置元素与元素之间的距离

.text1 {
 margin: 20px;
 }


margin也是一个复合样式，可以给四个方向都加上外边距

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布