Web前端HTML样式 CSS选择器

最新推荐文章于 2024-08-24 11:46:12 发布

炸鸡&汉堡

最新推荐文章于 2024-08-24 11:46:12 发布

阅读量305

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/aiheshuicxy/article/details/128125884

版权

Web前端

HTML

作用: 学习如何搭建页面结构和准备页面的内容, 相当于盖房子(毛坯房)
HyperTextMarkupLang: 超文本标记语言
超文本: 指不仅仅是纯文本,还包括字体效果和多媒体(音频,视频和图片)相关
学习HTML主要学习的就是有哪些标签,以及标签的使用方法

HTML页面结构:

<!DOCTYPE html> 文档声明: 告诉浏览器使用HTML哪个版本的标准解析页面,此写法代表使用html5的标准解析页面
<html lang="en">页面的跟标签,所有标签都写在此标签内部 
<head> 头标签, 给浏览器看的内容
    <meta charset="UTF-8"> 设置页面字符集
    <title>Title</title> 设置页面的标题
</head>
<body> 体标签, 给用户看的内容 
	
</body>
</html>

文本相关标签

内容标题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>
<!--action设置提交地址-->
<form action="http://www.tmooc.cn">
    <!--name属性是所有控件都必须有的属性,如果没有该属性则不会提交此控件的内容
    placeholder占位文本,maxlength设置最大字符长度
    value 设置控件的值 ,  readonly 设置只读
    -->
    用户名:<input type="text" name="username" maxlength="5"
               value="tom" readonly
               placeholder="用户名"><br>
    密码:<input type="password" name="password" placeholder="密码"><br>
    <!--单选框和多选框必须添加value属性 否则提交的内容为on
    checked 设置默认选中-->
    性别:<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"><!--select 选择-->
        <!--value设置提交的值,如果不写value则提交标签体内的内容
        selected 默认选中-->
        <!--option 选项-->
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option selected>广州</option>
    </select><br>
    <!--在按钮里面添加value是设置显示的文本内容-->
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>

分区标签

作用: 可以将多个有相关性的标签添加到一个分区标签里面, 对多个标签进行统一管理,可以将分区标签理解为一个容器
分区标签包括div和span
- div:块级分区标签, 独占一行
- span:行内分区标签, 共占一行
html5的标准中新增了一些分区标签作用和div一样,好处是提高了代码的可读性
- header 头标签
- footer脚标签
- main主体区域标签
- nav 导航标签

CSS

Cascading Style Sheets:层叠样式表
作用: 美化页面 , 相当于装修

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

三种引入方式:
- 内联:在标签的style属性中添加样式代码, 弊端:不能复用
- 内部:在head标签里面添加style标签,标签体内写样式代码,通过选择器先找到元素对象, 然后再添加样式, 好处是可以复用, 但是只能在当前页面复用,不能多页面复用
- 外部:在单独的css样式文件中写样式代码, 在html页面中引入此文件即可, 这样的话是可以实现多页面复用的
工作中因为需要多页面复用所以外部样式会用的更多, 学习过程中内部样式演示方便所以更多使用内部样式

选择器

作用: 用来选取页面中的标签

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}
id选择器: 当需要匹配页面中某一个元素的时候使用

格式: #id{样式代码}
类选择器: 将多个不相关的元素设置为同一个class值, 这样就将这多个元素划分成了同一类,然后通过类选择器进行选择

格式: .class{样式代码}
分组选择器: 将多个选择器划分为一组(可以理解为将多个选择器合并成一个选择器)

格式: 标签名,#id,.class{样式代码}
任意元素选择器: 匹配页面中所有元素,包括html和body

格式:*{样式代码}
子孙后代选择器: 通过元素和元素之间的关系匹配元素

格式:body div div p{样式代码} 匹配body里面的div里面的div里面的所有p包括后代
子元素选择器:通过元素和元素之间的关系匹配元素

格式:body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素不包含后代
伪类选择器: 匹配的是元素的状态,包括:未访问状态/访问过状态/悬停状态/点击状态

格式: a :link未访问/visited访问过/hover悬停/active激活{样式代码}