Web前端HTML样式 CSS选择器

Web前端HTML样式 CSS选择器
Web前端

 HTML
- 作用: 学习如何搭建页面结构和准备页面的内容, 相当于盖房子(毛坯房)
- HyperTextMarkupLang: 超文本标记语言
- 超文本: 指不仅仅是纯文本,还包括字体效果和多媒体(音频,视频和图片)相关
- 学习HTML主要学习的就是有哪些标签,以及标签的使用方法
- HTML页面结构:
```
DOCTYPE html> 文档声明: 告诉浏览器使用HTML哪个版本的标准解析页面,此写法代表使用html5的标准解析页面
<html lang="en">页面的跟标签,所有标签都写在此标签内部 
<head> 头标签, 给浏览器看的内容
    <meta charset="UTF-8"> 设置页面字符集
    <title>Titletitle> 设置页面的标题
head>
<body> 体标签, 给用户看的内容 
	
body>
html>
1
2
3
4
5
6
7
8
9
10
```
文本相关标签
- 内容标题h1-h6
  
  独占一行, 字体加粗, 自带上下间距
- 段落标签p
  
  独占一行,自带上下间距
- 水平分割线hr
- 换行br
- 加粗b
- 斜体i
- 下划线u
- 删除线s
- 无序列表: ul和li
- 有序列表: ol和li
图片标签img
- src: 资源路径
  - 相对路径: 访问站内资源使用
    图片和页面在同级目录: 直接写图片名
    图片在页面的上级目录: …/…/图片名
    图片在页面的下级目录: 文件夹名/图片名
  - 绝对路径: 一般访问站外资源使用, 又称为图片盗链, 有找不到图片的风险
- alt: 图片不能正常显示时显示的文本
- title:鼠标在图片上悬停时显示的文本
- width/height:设置图片的宽高, 两种方式:1.像素 2. 百分比只设置宽度时高度会自动等比例缩放
超链接a
- href: 资源路径, 类似图片标签的src属性
- 超链接包裹文本为文本超链接,包裹图片为图片超链接
- 页面内部跳转, 在目的地元素里面添加id,然后在超链接的href属性里面#id 这样就可以跳转到目的地元素的位置
表格table
- 相关标签: table表格 tr table row表示行
  td table data表示列 th table head表头(加粗并居中) caption表格标题
- 相关属性: border设置边框 colspan跨列 rowspan跨行
表单form
- 作用: 获取用户输入的内容,并提交给服务器
- 学习form表单,主要学习的就是有哪些控件,控件包括:文本框,密码框,单选,多选,下拉选等
- 相关代码:
```
<h1>注册页面h1>

<form action="http://www.tmooc.cn">
    
    用户名:<input type="text" name="username" maxlength="5"
               value="tom" readonly
               placeholder="用户名"><br>
    密码:<input type="password" name="password" placeholder="密码"><br>
    
    性别:<input type="radio" name="gender" value="m">男
    <input type="radio" name="gender" checked value="w">女<br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        
        
        <option value="bj">北京option>
        <option value="sh">上海option>
        <option selected>广州option>
    select><br>
    
    <input type="submit" value="注册">
    
    <input type="reset">
    
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">提交按钮button>
    <button type="reset">重置按钮button>
    <button type="button">自定义按钮button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
```
分区标签
- 作用: 可以将多个有相关性的标签添加到一个分区标签里面, 对多个标签进行统一管理,可以将分区标签理解为一个容器
- 分区标签包括div和span
  - div:块级分区标签, 独占一行
  - span:行内分区标签, 共占一行
- html5的标准中新增了一些分区标签作用和div一样,好处是提高了代码的可读性
  - header 头标签
  - footer脚标签
  - main主体区域标签
  - nav 导航标签
CSS
- Cascading Style Sheets:层叠样式表
- 作用: 美化页面 , 相当于装修
如何在html页面中添加css样式代码
- 三种引入方式:
  - 内联:在标签的style属性中添加样式代码, 弊端:不能复用
  - 内部:在head标签里面添加style标签,标签体内写样式代码,通过选择器先找到元素对象, 然后再添加样式, 好处是可以复用, 但是只能在当前页面复用,不能多页面复用
  - 外部:在单独的css样式文件中写样式代码, 在html页面中引入此文件即可, 这样的话是可以实现多页面复用的
- 工作中因为需要多页面复用所以外部样式会用的更多, 学习过程中内部样式演示方便所以更多使用内部样式
选择器
- 作用: 用来选取页面中的标签
1. 标签名选择器: 匹配页面中所有同名标签
  
  格式: 标签名{样式代码}
2. id选择器: 当需要匹配页面中某一个元素的时候使用
  
  格式: #id{样式代码}
3. 类选择器: 将多个不相关的元素设置为同一个class值, 这样就将这多个元素划分成了同一类,然后通过类选择器进行选择
  
  格式: .class{样式代码}
4. 分组选择器: 将多个选择器划分为一组(可以理解为将多个选择器合并成一个选择器)
  
  格式: 标签名,#id,.class{样式代码}
5. 任意元素选择器: 匹配页面中所有元素,包括html和body
  
  格式:*{样式代码}
6. 子孙后代选择器: 通过元素和元素之间的关系匹配元素
  
  格式:body div div p{样式代码} 匹配body里面的div里面的div里面的所有p包括后代
7. 子元素选择器:通过元素和元素之间的关系匹配元素
  
  格式:body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素不包含后代
8. 伪类选择器: 匹配的是元素的状态,包括:未访问状态/访问过状态/悬停状态/点击状态
  
  格式: a :link未访问/visited访问过/hover悬停/active激活{样式代码}
相关阅读:
数据科学中常用的应用统计知识
 C++如何调用Halcon(将Halcon代码封装为Dll）
你了解机械键盘吗？Keychron Q1开箱与体验实录
 minikube部署K8s命令
 【设计模式】Java设计模式 - 原型模式
 Opentelemetry SDK的简单用法
 每天分享几个面试题(九)
1569. 将子数组重新排序得到同一个二叉查找树的方案数数学+DFS
70行代码撸一个桌面自动翻译神器！
Java注解
原文地址：https://blog.csdn.net/aiheshuicxy/article/details/128125884

Web前端

HTML

文本相关标签

图片标签img

超链接a

表格table

表单form

分区标签

CSS

如何在html页面中添加css样式代码

选择器