HTML+CSS

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的主体标签

实例

<!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：图片高度

实例:

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

注意：

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

3、路径

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

4、 超链接

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

属性：

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

target:

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

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

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

5、 列表

  1. 无序列表
    <ul>
	<li></li>  
</ul>
  2. 有序列表
    <ol>
 	<li></li>
</ol>
  3. 自定义列表
    <dl>
  	<dt>列表头</dt>
  	<dd>列表内容</dd>
</dl>

6、 HTML注释

多行注释：

注释的作用：

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

四、iframe

1、定义和用法

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

2、使用

<!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 列标签

实例：

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

六 FORM表单

标签： <form></form>

1、 form属性

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中注释

    /* ... */

二、在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样式
格式：

 <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标签采用此样式

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的元素。

posted @ 2023-03-17 19:37  凫弥  阅读(30)  评论(0)  编辑  收藏  举报