简单认识HTML和CSS

小田爱犯困.

已于 2024-03-16 20:37:23 修改

阅读量847

点赞数 24

分类专栏： python爬虫文章标签： html 前端 css

于 2024-03-13 20:15:06 首次发布

本文链接：https://blog.csdn.net/tzy2358/article/details/136685716

版权

python爬虫专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念、标签结构、头部元素（如doctype、lang、title等）、CSS的样式应用、HTML5元素（如div、p、h1-h6、img、链接、列表、表单等），以及CSS选择器的使用，为初学者提供了HTML和CSS的基础知识概览。

摘要由CSDN通过智能技术生成

HTML(HyperText Markup Language)

前言

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它由一系列的标签组成，这些标签用于定义网页的结构、样式和内容。HTML标签包括开标签和闭标签，它们之间用于包裹网页中的内容。

TML定义了文本、图像、链接、表格等元素的语义标签，这些标签描述了元素的含义和作用，使得浏览器能够正确地解释和渲染网页。同时，HTML也支持添加样式和脚本，使得网页更加丰富和交互。

WEB前端：HTML+CSS+JavaScript

HTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。

css：外观标准，层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。

有什么不懂的可以评论下来，有哪些地方不足的尽管提，实战代码少了什么的，后面会慢慢跟新深入的，先跟新爬虫，因为博主也在学习一起加油！

HTMl

1. 什么是HTML？

超文本标记语言

(1) 标签也叫做标记

(2) html是由标签/标记和内容组成的

(3) 标签是由标签名称和属性组成的

实例：

<人肤色=“黄色” 外貌="很帅"></人>

不懂的可以去 https://developer.mozilla.org/ 这个网站看这是人家定义好的直接搜索

2. HTML的主体标签

实例

<!DOCTYPE html> #H5的头声明文档类型为html

<head>

</head>

<body>

放html的主体标签

</body>

</html>

- html:文件是网页，浏览器加载网页，就可以浏览

- head:头部分，网页总体信息

+ title:网页标题

+ meta：网页主体信息，会根据name(author/description/keywords)

+ link:引入外部文件

+ style：写入CSS

+ script：写入JS

- body:身体部分，网页内容

3. HTML的标签

1. 标签分为：单标签/单标记

如：\<br /> /\<br >

双标签/双标记

如: \<p>\</p>

2. 文本标签

1. <div></div> 块标签作用是设定字、画、表格等的摆放位置

2. <p></p> 段落标签自成一段会将上下的文字和它保持一定的距离

3. <h1>-</h6> 标题标签字体加粗自占一行

注意：建议一个页面h1只能出现一次

  <div>
    <h1>我是一级标题啊</h1>
    <h2>我是二级标题啊</h2>
    <h3>我是三级标题啊</h3>
    <h4>我是四级标题啊</h4>
    <h5>我是五级标题啊</h5>
    <h6>我是六级标题啊</h6>
    <p>我是段落啊</p>
  </div>

3. 图片标签

<img> 在网页中插入一张图片

属性：

+ src：图片名及url地址 (必须属性)

+ alt: 图片加载失败时的提示信息

+ title：文字提示属性

+ width：图片宽度

+ height：图片高度

实例:

<img src="" alt="" title="" width="" height="" border="">

注意：

如果宽和高只给一个那么为等比缩放如果俩个都给那么会按照你所给的宽和高来显示

4. 路径

1. 相对路径

+ ./ 当前 (兄弟)

+ ../ 上一级 (父亲)

2. 绝对路径

+ 一个固定得链接地址(如域名)

+ 从根磁盘一直到你的文件得路径

5. 超链接

<a href="链接地址" title="提示信息" target="打开方式">点击显示得内容</a>

属性：

href必须，指的是链接跳转地址

target:

 _blank 新建窗口得形式来打开

 _self 本窗口来打开(默认)

title：文字提示属性（详情）

锚链接(直接跳转到当前页的文章1)

<a href="#essay">文章1</a>
<h3 id="essay">
文章1
<p >HTML定义了文本、图像、链接、表格等元素的语义。</p>
</h3>

6. 列表

1. 无序列表

<ul>

</ul>

属性：

type 显示得类型

square 方形显示

disc 默认圆点

circle 空心圆

2. 有序列表

<ol>

</ol>

属性

type

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性。

start 起始值

3. 自定义列表

<dl>

</dl>

7. HTML注释

多行注释：

注释的作用：

1. 代码的调试

2. 解释说明

4. iframe

1、定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

2、使用

<!DOCTYPE html>

<head>

</head>

<body>

<p>一些老的浏览器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可见的。</p>

</body>

</html>

5. table表格

1、属性：

+ width 宽

+ height 高

+ border 边框

+ rowspan合并行

+ colspan合并列

2、标签：

caption 表格标题

tr 行标签

th 列头标签

td 列标签

实例：

<table>

<caption>我是表格的标题</caption>

<tr>

</tr>

<tr>

<td>我是单元格</td>

</tr>

</table>

6. form表单

标签： <form></form>

1、 form属性

action 提交的地址

method 提交的方式

get

(1) 默认不写为get传参 url地址栏可见

(2) 长度受限制（IE浏览器2k火狐8k）

(3) 相对不安全

post

(1) url地址栏不可见长度默认不受限制

(2) 相对安全

2、input 标签

<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

具体在下面有详解：

如：

<input type="text" name="username">

3、 select 标签创建下拉列表。

属性：

+ name属性:定义名称,用于存储下拉值的

内嵌标签：

<option> 下拉选择项标签,用于嵌入到 <select> 标签中使用的;

属性：

+ value属性:下拉项的值

+ selected属性:默认下拉指定项.

4、 textarea 多行的文本输入区域

属性：

+ \ name :定义名称,用于存储文本区域中的值。

+ cols ：规定文本区内可见的列数。

+ rows ：规定文本区内可见的行数。

5、input 标签

type属性:表示表单项的类型:

值如下:

+ text:单行文本框

+ password:密码输入框

+ checkbox:多选框注意要提供value值

+ radio:单选框注意要提供value值

+ file:文件上传选择框

+ button:普通按钮

+ submit:提交按钮

+ reset:重置按钮, 还原到开始(第一次打开时)的效果

7. HTML中HEAD头部设置

设置网页编码：

<meta charset="utf-8"/>

网页标题：

<title>本网页标题</title>

导入CSS文件：

<link type="text/css" rel="stylesheet" href=".css"/>

CSS代码：

<style type="text/css">嵌入css样式代码</style>

JS文件或代码：

<script>......</script>

CSS

1. 什么是css？

层叠样式表

+ 命名规则：

使用字母、数字或下划线和减号构成，不要以数字开头

+ 格式：

选择器{属性:值;属性:值;属性:值;....}

其中选择器也叫选择符

+ CSS中注释

 /* ... */

2. 使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式

格式：

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<div style="float:left;">雏田喜欢鸣人</div>

特点：仅作用于本标签

2、内部方式（内嵌样式）

就是在head标签中使用`<style type="text/css">....</style>`标签来设置css样式

格式：

....css样式代码

</style>

<style type="text/css">
		 body{
			 background-color:skyblue;
		 }
		 .f{
			 text-indent:30px;
			 text-align:left;
			 line-height:25px;
			 position:relative;
			 top:10px;
			 left:10px;
			 width:1600px;
			 height:140px;
			 background-color:lightyellow;
			 box-shadow:6px 6px 6px 6px rgba(85, 0, 255, 0.7);
		 }
</style>

**特点：**作用于当前整个页面

3、外部导入方式（外部链入）

+ （推荐）就是在head标签中使用`<link/>`标签导入一个css文件，在作用于本页面，实现css样式设置

格式：

Css <link href="文件名.css" type="text/css" rel="stylesheet"/>

<link rel="stylesheet" href="../谊/t.css">

+ 还可以使用import在style标签中导入css文件。

特点：作用于整个网站

3. css中的选择符

1、html选择符（标签选择器）

就是把html标签作为选择符使用

如 p{....} 网页中所有p标签采用此样式

<style>
        p{
            
        }
 </style>

h2{....} 网页中所有h2标签采用此样式

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

定义： .类名{样式....} 匿名类

其他选择符名.类名{样式....}

使用：<html标签 class="类名">...</html标签>

.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

p .ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/

注意：类选择符可以在网页中重复使用

3、Id选择符(ID选择器)

定义： #id名{样式.....}

使用：<html标签 id="id名">...</html标签>

注意：id选择符只在网页中使用一次

选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

4、关联选择符（包含选择符）

格式：选择符1 选择符2 选择符3 ...{样式....}

例如： table a{....} /\*table标签里的a标签才采用此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5、组合选择符（选择符组）

格式：选择符1,选择符2,选择符3 ...{样式....}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

4. css中的选择器

1.关系选择器：

div>p 选择所有作为div元素的子元素p

div+p 选择紧贴在div元素之后p元素

div~p 选择div元素后面的所有兄弟元素p

2. 属性选择器：

[attribute]选择具有attribute属性的元素。

[attribute=value]选择具有attribute属性且属性值等于value的元素。

小田爱犯困.

关注

24
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单认识HTML和CSS

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它由一系列的标签组成，这些标签用于定义网页的结构、样式和内容。HTML标签包括开标签和闭标签，它们之间用于包裹网页中的内容。TML定义了文本、图像、链接、表格等元素的语义标签，这些标签描述了元素的含义和作用，使得浏览器能够正确地解释和渲染网页。同时，HTML也支持添加样式和脚本，使得网页更加丰富和交互。WEB前端：HTML+CSS+JavaScriptHTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。
复制链接

扫一扫