【HTML&CSS】

置顶 BridgeCloud

已于 2022-08-27 16:55:56 修改

阅读量295

点赞数

分类专栏：个人笔记 Java Web 文章标签： html css 前端

于 2022-08-26 01:43:40 首次发布

本文链接：https://blog.csdn.net/qq_37168484/article/details/126475884

版权

个人笔记同时被 2 个专栏收录

39 篇文章 3 订阅

订阅专栏

Java Web

11 篇文章 0 订阅

订阅专栏

1，HTML

1.1 介绍

HTML 是一门语言，HTML(HyperText Markup Language)：超文本标记语言：

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

HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，

W3C标准：

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

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

1.2 快速入门

要实现这个页面，我们需要从以下三步进行实现

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

页面文件的后缀名是 .html，所以需要该后缀名

编写 HTML 结构标签

HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

<html>
	<head>
    	<title> </title>
    </head>
    <body>
        
    </body>
</html>

总结：

HTML 文件以.htm或.html为扩展名
HTML 结构标签
HTML 标签不区分大小写
HTML 标签属性值单双引皆可
HTML 语法松散，不加结束标签亦可

1.3 基础标签

在这里插入图片描述

1.3.1 标题标签

1.3.2 hr标签

hr 标签在浏览器中呈现出横线的效果。

在页面文件中书写 hr 标签

<hr>

1.3.3 字体标签

font：字体标签

face 属性：用来设置字体。如 “楷体”、"宋体"等
color 属性：设置文字颜色。颜色有三种表示方式
- 英文单词：red,pink,blue…
- rgb(值1,值2,值3)：值的取值范围：0~255
- #值1值2值3：值的范围：00~FF

代码演示：

<font face="楷体" size="5" color="#ff0000">传智教育</font>

注意：

font 标签已经不建议使用了，以后如果要改变文字字体，大小，颜色可以使用 CSS 进行设置。

1.3.4 换行标签

<br>

1.3.5 段落标签

<p>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
</p>

1.3.6 加粗、斜体、下划线标签

b：加粗标签
i：斜体标签
u：下划线标签，在文字的下方有一条横线

代码如下：

<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>

1.3.7 居中标签

center ：文本居中

代码如下：

<hr>
<center>
    <b>沙柳河水流淌</b>
</center>

1.4 图片、音频、视频标签

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

尺寸单位：

height属性和width属性有两种设置方式：

像素：单位是px
百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

绝对路径：完整路径

这里的绝对路径是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。
相对路径：相对位置关系

找页面和其他资源的相对路径。

./ 表示当前路径

…/ 表示上一级路径

…/…/ 表示上两级路径

1.5 超链接标签

a 标签属性：

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

1.6 列表标签

HTML 中列表分为

有序列表
无序列表

标签说明：

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

无序列表中的 type 属性用来指定标记的形状

1.7 表格标签

table ：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr ：定义行
- align：定义表格行的内容对齐方式
td ：定义单元格
- rowspan:规定单元格可横跨的行数
- colspan:规定单元格可横跨的列数
th：定义表头单元格

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>
</body>
</html>

1.8 布局标签

<img src="assets/image-20210811194410699.png" alt

这两个标签，一般都是和css结合到一块使用来实现页面的布局。

div标签在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

1.9 表单标签

1.9.1 表单标签概述

表单：在网页中主要负责数据采集功能，使用标签定义表单

表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

form 是表单标签，它在页面上没有任何展示的效果。

1.9.2 form标签属性

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

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

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

1.9.3 代码演示

将 form 标签的 action 属性值设置为 # ，将其将数据提交到当前页面。注意一点，要想提交数据，input 输入框必须设置 name 属性。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#">
        <input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

浏览器展示效果如下：

在输入框输入 hehe ，然后点击 提交 按钮，就能看到如下效果

默认是 method = 'get'，所以该取值就会将数据拼接到URL的后面。
将 method 属性值设置为 post，浏览器的效果如下：

可以使用浏览器的开发者工具来查看,重新提交数据后，可以看到提交的数据，如下图

1.10 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

<input>：表单项，通过type属性控制输入形式

input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样
<select>：定义下拉列表，<option> 定义列表项
<textarea>：文本域

注意：

以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">

        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br>

        <label for="password">密码：</label>
        <input type="password" name="password" id="password"><br>

        性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
        <br>

        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>

        头像：
        <input type="file"><br>

        城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>

        个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>
</body>
</html>

在浏览器的效果如下：

2，CSS

2.1 概述

==CSS 是一门语言，用于控制网页表现。

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

2.2 css 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

内联样式：在标签内部使用style属性，属性值是css属性键值对
```
<div style="color: red">Hello CSS~</div>
```
给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。
内部样式：定义

<link href="../css/demo.css" rel="stylesheet">

2.3 css 选择器

元素选择器

格式：

元素名称{color: red;}

例子：

div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

id选择器

格式：

#id属性值{color: red;}

例子：

html代码如下：

<div id="name">hello css2</div>

css代码如下：

#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

类选择器

格式：

.class属性值{color: red;}

例子：

html代码如下：

<div class="cls">hello css3</div>

css代码如下：

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

CSS属性可以去 CSS参考手册查询

BridgeCloud

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML&CSS】

HTML 是一门语言，超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，W3C是万维网联盟，这个组成是用来定义标准的。结构：对应的是 HTML 语言表现：对应的是 CSS 语言行为：对应的是 JavaScript 语言表单：在网页中主要负责数据采集功能，使用标签定义表单表单项(元素)：不同类型的 input 元素、下拉列表、文本域等form。......
复制链接

扫一扫