Web前端HTML样式 CSS选择器
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" readonlyplaceholder="用户名"><br>密码:<input type="password" name="password" placeholder="密码"><br><!--单选框和多选框必须添加value属性 否则提交的内容为onchecked 设置默认选中-->性别:<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激活{样式代码}
Web前端HTML样式 CSS选择器相关推荐
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- Web全栈~06.CSS选择器
Web基本笔记~06.CSS选择器 上一期 关系选择器 后代选择器 定义 选择所有被 E 元素包含的 F 元素,中间用空格隔开 语法 E F{ } 例子 <html><head> ...
- web前端学习（CSS篇）
目录 CSS基础语法 基本样式 内联样式与内部样式 内联样式 外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 背景实现视觉差效果 CSS边框样式 边框实现三角形 CSS文字样式 CSS段落样 ...
- web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- 【web前端开发】CSS文字和文本样式
文章目录 前言 字体大小 字体粗细 字体样式 字体 font复合属性 文本缩进 文本水平对齐方式 文本修饰线 行高 颜色 标签水平居中 ⭐思维导图 前言 本篇文章主要讲解CSS中的文字和文本样式及一些 ...
- Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
最新文章
- Python : *号和**号的使用
- vs调试显示16进制如何调节为10进制
- 【深度学习】transformer 真的快要取代计算机视觉中的 CNN 吗？
- 【ArcGIS风暴】ArcGIS 10.2字段计算器（Field Calculator）批量条件赋值用法总结
- linux搭建乐网服务器,教你linux搭建web服务器
- 硬件基础 —— 光耦
- 未来教育计算机二级书怎么样,未来教育计算机二级
- 通用汽车研发中心最新提出：3D车道线检测新方法
- Linux桌面系统远程访问全解析
- 微信音频通话数据保存服务器,微信语音通话怎么录MP3音频文件
- 大地经纬度坐标系与Web墨卡托坐标系的转换
- 五人合伙最佳股份分配_五个人合伙，股份如何划分才合理？
- 【Spring Security】Spring Boot + Spring Security 实现自动登录功能
- 李雅普诺夫理论基础（1）
- Servlet入门到入坟 一站式基础及进阶——SpringMVC没它都不行 你确定不来看看——囊括初学基础以及进阶
- TeamViewer：一路前行，用技术实现领域更新
- 一个又离不开的软件：图形化远程控制APP向日葵
- 5G图传 5G单兵 5G视频终端 无人机4G图传
- 索尼Alpha系列相机通过照片读取快门次数的在线工具
- Oracle统计分析