Post

CSS & HTML

Posted
By 😇 11 min read

HTML(HyperText Markup Language)

前言

软件架构

B/S

​ Browser/Server 网站

C/S

​ Client/Server QQ

HTML的简介、发展史：

万维网联盟（W3C）维护。包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。

网站：

把所有的网站资源文件（HTML,CSS,JS,图片,视频等）整合到一起(的一个文件夹)

WEB前端：HTML+CSS+JavaScript

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

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

重点：

我们学习HTML与CSS不是为了写样式，而是了解HTML标签的结构，CSS中的选择器也就是长什么样子即可，为了后面的正则、xpath与bs4做铺垫准备

一、什么是 HTML？

超文本标记语言

​ (1) 标签 也叫做 标记

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

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

实例：

<人 肤色=“黄色” 眼镜=”很大”></人>

扩展：

使用协议为 http超文本传输协议

普通文本：文字内容

超文本：视频、音频、图片、文字…

二、HTML 的主体标签

实例

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>  #H5的头   声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">  #之前的头文件 现在不用
<html>
<head>
	<title>标题内容</title>
  	<meta charset="UTF-8"> #设置字符集
</head>
<body>
  	放html的主体标签
</body>
</html>
  • html:文件是网页，浏览器加载网页，就可以浏览
  • head:头部分，网页总体信息
    • title:网页标题
    • meta：网页主体信息，会根据name(author/description/keywords)
    • link:引入外部文件
    • style：写入CSS
    • script：写入JS
  • body:身体部分，网页内容

三、HTML 的标签

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

如：<br /> /<br >

双标签/双标记

如: <p></p>

1、 文本标签

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

  2. <p></p> 段落标签 自成一段 会将上下的文字 和它保持一定的距离
  3. <h1>-</h6> 标题标签 字体加粗 自占一行

2、 图片标签

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

属性：

  • src： 图片名及url地址 (必须属性)
  • alt: 图片加载失败时的提示信息
  • title：文字提示属性
  • width：图片宽度
  • height：图片高度

实例:

1

<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />

注意：

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

3、路径

  1. 相对路径
    • ./ 当前
    • ../ 上一级
  2. 绝对路径(了解)
    • 一个固定得链接地址(如域名)
    • 从根磁盘 一直到你的文件得路径

4、 超链接

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

属性：

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

target:

​ _blank 新建窗口得形式来打开

​ _self 本窗口来打开(默认)

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

5、 列表

  1. 无序列表

    1
2
3

    <ul>
	<li></li>  
</ul>

  2. 有序列表

    1
2
3

    <ol>
 	<li></li>
</ol>

  3. 自定义列表

    1
2
3
4

    <dl>
  	<dt>列表头</dt>
  	<dd>列表内容</dd>
</dl>

6、 HTML 注释

多行注释：

注释的作用：

  1. 代码的调试
  2. 解释说明

四、iframe

1、定义和用法

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

2、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

<iframe src="http://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>

</body>
</html>

五 TABLE 表格

table表格

1、属性：

  • width 宽
  • height 高
  • border 边框

2、标签：

tr 行标签

th 列头标签 td 列标签

实例：

1
2
3
4
5
6
7
8
9
10
11
12

<table>
  <tr>
    <th>我是表头</th>
    <th>我是表头</th>
    <th>我是表头</th>
  </tr>
  <tr>
    <td>我是单元格</td>
    <td>我是单元格</td>
    <td>我是单元格</td>
  </tr>
</table>

六 FORM 表单

标签： <form></form>

1、 form 属性

1
2
3
4
5
6
7
8
9

action	提交的地址
method	提交的方式
	get
		(1) 默认不写 为get传参  url地址栏可见
		(2) 长度受限制 （IE浏览器2k火狐8k）
		(3) 相对不安全
	post
		(1) url地址栏不可见 长度默认不受限制
		(2) 相对安全

2、input 标签

<input> 表单项标签input定义输入字段，用户可在其中输入数据。

如：

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

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

属性：

  • name属性:定义名称,用于存储下拉值的
内嵌标签：

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

属性：
  • value属性:下拉项的值

4、input 标签

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

值如下:

  • text:单行文本框
  • password:密码输入框
  • submit:提交按钮

CSS 层叠样式表

一、css的语法

  • 什么是css？

    层叠样式表

  • 命名规则：

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

  • 格式：

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

    其中选择器也叫选择符

  • CSS中注释

    1

    /* ... */

二、在 HTML 中如何使用 css 样式（html 中嵌入 css 的方式）

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

就是在HTML的标签中使用style属性来设置css样式 格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p> 特点：仅作用于本标签

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

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

1
2
3

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

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

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

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

    格式：

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

    特点：作用于整个网站

三、**css2的选择符：

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

就是把html标签作为选择符使用 如 p{….} 网页中所有p标签采用此样式

1

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

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

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

其他选择符名.类名{样式….} 使用：<html标签 class="类名">...</html标签>

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

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

3、Id 选择符（ID 选择器）

定义： #id名{样式…..} 使用：<html标签 id="id名">...</html标签>

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

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都采用此样式/

四、 CSS3 中的选择器

  1. 关系选择器：

div>p 选择所有作为div元素的子元素p div+p 选择紧贴在div元素之后p元素 div~p 选择div元素后面的所有兄弟元素p

  1. 属性选择器：

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

Python
Python Web Crawler
This post is licensed under CC BY 4.0 by the author.