HTML和CSS

liangmou2121

已于 2024-10-18 11:42:37 修改

阅读量660

点赞数 9

分类专栏： web网络库笔记文章标签： html css 前端

于 2024-10-18 11:25:50 首次发布

本文链接：https://blog.youkuaiyun.com/liangmeirong123/article/details/143040053

版权

web网络库笔记专栏收录该内容

7 篇文章

订阅专栏

1.HTML和CSS

(HyperText Markup Language) : 超文本标记语言

超文本: 超越了文本的限制,比普通文本更强大,除了文字信息,还可以定义图片,音频,视频等内容
标记
标记语言: 由标签构成的语言
- HTML的标签都是预定义好的,例如使用<a>展示超链接,使用<img>展示图片,<video>`展示视频
- HTML代码直接在浏览器中运行,HTML标签由浏览器解析

1.1HTML入门练习

1.新建文本文件,后缀名改为.html
2.编写HTML结构标签
3.在<body中填写内容>
呈现页面
![[Pasted image 20240809105940.png]]

![[Pasted image 20240809145429.png]]

注意点:
1)<html>和其他具有<>的内容中无论大小写
2)"1.jpg"也可以用单引号’1.jpg’

1.2基础标签 & 样式

以新浪新闻为例

1.2.1新浪新闻-标题

标题标签:<h1>-<h6>
水平线标签:<hr>

1.2.1.1标题排版

![[Pasted image 20240810102448.png]]

完成标题排版

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 字符集为UTF-8 -->
  <meta charset="UTF-8">
  <!-- 设置浏览器兼容性 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
  <!-- img标签:
  src图片资源路径
  width：宽度(px，像素；%相对于父元素的百分比)
  height:高度宽度(px，像素；% 相对于父元素的百分比)
  路径书写方式:
  绝对路径  <img src="D:\Web网络库2024-2025大二上学期\HTML\457a099e9c2540ffe6504081edc1635.png">
  绝对网络路径 https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
  相对路径:  ./当前目录 ./可以省略
            ../ 上一级目录 ../不可以省略-->
  <img src="./457a099e9c2540ffe6504081edc1635.png"> 新浪政务 > 正文
  <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
  <hr>
  2023年03月02日21:50央视网
  <hr>
</body>
</html>

1.2.1.2超链接

标签 <a href = "..." target = "...">央视网</a>
属性 href:指定资源访问的ur1
targert:制定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开

去掉超链接中的下划线,使用css样式text-decoration

1.2.2图片标签`<img>`

src:指定图像的url(绝对路径 / 相对路径)
width: 图像的宽度(像素/相对于父元素的百分比)
height: 图像的高度(像素/相对于父元素的百分比)

width:宽度(npx;n%)
height:高度(npx;n%)
px-像素,%-相对于父元素的百分比
例:

<img src="457a099e9c2540ffe6504081edc1635.png" width="300px" height="300px">
  <!-- 该图片宽和高都为300个像素 -->

<img src="./457a099e9c2540ffe6504081edc1635.png" width="80%">
<!-- 该图片占总页面宽80% -->

1.2.3视频标签`<video>`

src:规定视频的ur1
controls:显示播放控件
width:播放器宽度
height:播放器的高度

如果标签的属性名和标签的属性值一样,可以省略标签的属性值

1.2.4音频标签`<audio>`

src:规定音频的ur1
controls:显示播放控件

1.2.5段落标签`<p>`

利用CSS属性 text-indent进行首行缩进
![[Pasted image 20240810173755.png]]

1.2.6换行标签`<br>`

1.2.7文本加粗标签`<b>/<strong>`

<strong>标签有强调意味,<b>标签只是单纯地加黑
![[Pasted image 20240810174317.png]]

1.2.8布局标签<div>``<span>

特点

div标签

一行只显示一个(独占一行)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高*

span标签

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高(width,height)*

设置版面居中
![[Pasted image 20240811145603.png]]

1.2.9表格标签

应用场景:在网页中以表格(行,列)形式整齐地展示数据
标签

<table> 定义表格整体,可以包裹多个<tr> boder : 规定表格边框的宽度,width:规定表格的宽度
cellspacing: 规定单元之间的空间
<tr> 表格的行,可以包裹多个<td>
<td> 表格单元格(普通),可以包裹内容, 如果是表头单元格,可以替换为<th>*

2.表单标签

应用场景:在网页中主要负责数据采集功能,如注册,登录,数据采集
标签: <form>
![[Pasted image 20240811154328.png]]

2.1表单项标签

不同类型的input元素,下拉列表,文本域等

<input> :定义表单项,通过type属性控制输入形式
<select> :定义下拉列表,<option>定义列表项
<textarea> : 定义文本域

<input>
![[Pasted image 20240811161357.png]]

<select>
![[Pasted image 20240811161455.png]]

<textarea>
![[Pasted image 20240811161607.png]]

![[Pasted image 20240811170226.png]]

注意:1)name需要相同,编译器才能确认是同一个表单项
2)描述区域的方框是可拖动的

2.2属性

action:规定当提交表单时向何处发送表单数据,URL
method:规定用于发送表单数据的方式。GET,POST
value:属性用于定义表单元素的值。这个值会在表单提交时发送到服务器。
get:在url后面拼接表单数据 url长度有限,是method的默认值
post:在消息体(请求体)中传递的,参数无大小限制
get:

如果不指定,默认提交到当前页面

post
![[Pasted image 20240811155746.png]]
在这里插入图片描述

2.3路径书写方式:

1)绝对磁盘路径
![[Pasted image 20240810095333.png]]

2)绝对网络路径
![[Pasted image 20240810095701.png]]

3)相对路径: ./当前目录 ./可以省略
../ 上一级目录 ../不可以省略
![[Pasted image 20240810100527.png]]

3.CSS

(Cascading Style Sheet) : 层叠样式表,用于控制页面的样式(表现)
![[Pasted image 20240810103853.png]]

3.1改变标题颜色的方法

行内样式: 写在标签style属性中(不推荐)
内嵌样式:写在style标签中(可以写在页面的任何位置,但通常约定写在head标签中)
外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)*

3.1.1行内样式

![[Pasted image 20240810105438.png]]

![[Pasted image 20240810105410.png]]

<body>
  <img src="./457a099e9c2540ffe6504081edc1635.png"> 新浪政务 > 正文
  <!-- 方式一:行内样式 -->
  <h1 style="color: brown;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
  <hr>

3.1.2内嵌样式

![[Pasted image 20240810104348.png]]

![[Pasted image 20240810110124.png]]

针对所有的h1级的标题,所有的h1标题都会变成蓝色

3.1.3外联样式

![[Pasted image 20240810104450.png]]

![[Pasted image 20240810135116.png]]

3.2颜色的表示形式

关键字: 预定义的颜色名-取值 red,green,blue…
rgb表示法: 红绿蓝三原色,每项值的取值范围: 0~255-取值 rgb(0,0,0),rgb(255,255,255)
注意: rag(红颜色的值,绿颜色的值,蓝颜色的值),例rgb(255,0,0)-纯红色:…
十六进制表示法:#开头,将数字转换成十六进制表示-取值 #000000 ,#ff0000,#cccccc,简写:#000,#ccc
注意:#000000-第一第二位数字表示红色,第三第四位数表示绿色,第五第六位数字表示蓝色
#ff0000表示红色拉满,其他为0,而且两个ff可以缩写成1个f,两个0可以缩写成一个0 - #f00

3.2.1rgb表示法

![[Pasted image 20240810140831.png]]

3.3十六进制表示法

![[Pasted image 20240810140959.png]]

3.4改变行内元素颜色

非标题
使用<span></span>无语义标签
![[Pasted image 20240810150857.png]]

3.5CSS选择器

用来选取需要设置的样式的元素(标签)

元素选择器
id选择器
类选择器

3.5.1元素选择器

在这里插入图片描述

![[Pasted image 20240810151251.png]]

3.5.2id选择器

![[Pasted image 20240810151312.png]]

![[Pasted image 20240810151850.png]]

3.5.3类选择器

![[Pasted image 20240810151334.png]]

![[Pasted image 20240810151615.png]]

优先级:id选择器>类选择器>元素选择器

3.6更改字体大小

在设置行内元素颜色的选择器里面设置对应的字体大小
使用font-sizse:npx(n个像素)

    #time{
        color:rgb(147,144,145);
      font-size: 12px;  /* 设置字体的大小 */
      }

3.7首行缩进

test-indent
对所有段落进行首行缩进50个像素
![[Pasted image 20240810173615.png]]

3.8行高

line-height
每行高为45个像素
![[Pasted image 20240810174007.png]]

3.9文本对齐

text-align:center 中间对齐
text-align:left 靠左对齐
text-align:right 靠右对齐
![[Pasted image 20240810175413.png]]

4.盒子模型

**盒子:页面中所有的元素(标签)都可以看作是一个盒子,由盒子将页面的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型组成: 内容区域(content),内边距区域(padding),边框区域(border),外边距区域(margin)**