大前端html基础学习01
根目录
相对路径:针对图片数量比较多的情况,新建一个文件夹,将所有图片放进去,imgs/cat.webp
(1)/:下一级
(2)a/b/c/cat.webp
返回路径(向外找):从下一级html中找上级或上上级的图片,走出去,img scr=”../”
(3) ../:返回上一级(可以多次书写)
(4)../../ 返回上一级的上一级
绝对路径:不建议使用。
认真听,大量练
一、 注释
1、<!—h1一个页面只能用一次-->
2、作用:写给自己或者其他开发者看的
3、html的注释语法<!--注释内容--> 快捷键:ctrl+/
4、css的语法注释/*css注释内容*/ 快捷键:ctrl+/光标在这一行即可
二、 表单
1、 收集用户的数据
2、 组成
(1) 表单域-form
(2) 表单控件:text文本输入框,password密码框,value=“username”默认值
(3) 提示信息:submit提交,reset重置
(4) 注意:input在一行显示,提交后出问号,点重置后没有变化
三、 CSS(cascading style sheets)层叠样式表,web中的标准语言,修饰网页信息的显示样式。
1、 语法:选择符(属性:值;属性:值;)
2、 选择器+空格+大括号+属性+冒号+值+分号+回车
3、
4、 选择符表示要定义样式的对象
5、 声明:属性+属性值
6、 属性必须放入花括号,且必须分号结尾。
7、 Font-size: 30px (意思是字体大小:30像素)
8、 浏览器 的默认字体大小是16px font-size: 16px
四、 css选择器
1、 标签(元素)
2、 Id选择器
(1) id=#暂时不推荐使用
(2) 注意:Id名不能重复,(具有唯一性),一个只能用一次
3、 Class选择器:开发中使用频率比较高的(推荐使用)
(1) class =.
(2)
五css的创建方式
1、 内部样式表-直接在html文件中通过style标签书写的css
2、 行内样式-直接写在标签身上的样式
3、 外部样式(外链)
4、
五、群组选择器1,2,3 {
六、通配符选择器:*+空格+花括号+回车+属性---匹配所有标签
* {
Margin:0;
Padding:0;
}(取消标签的间隙)
七、包含(后代)选择器怕p strong {
}
八、伪类选择器:..属于a标签的四种语法
1、link:a:link {
Color: red;
}指超链接的初始状态
2、visited:a:visited {
color:red;
}指超链接跳转后的状态
4、 hover:a:hover {
color: red;
}之鼠标悬停的状态
5、 active: a:active {
6、 color:red;
}之鼠标按下去激活后的状态
注意事项:如果这四个要写,必须按照顺序去写,hover 伪类,任何元素都可以添加这个伪类
两个新的标签:1、div 一般称为容器或盒子,一般用来进行页面布局,可以写任何元素包括div进行嵌套,独占一行
3、 span 一般针对局部文字进行特殊处理,在一行显示。
类名的要求(id名一样):1、类名不能使用纯数字,且不要用数字开头,不要使用一些特殊符号,建议有意义(changered),也不要使用中文,最好使用英文,实在不行拼音。
大前端html基础学习01的更多相关文章
- 【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
- 18-09-21 numpy 的基础学习01
# 1关于numpy 的学习import numpy as np # 一 如何创建数组****# 1 有规律的一维数据的创建======# 1 range() 和arange() 区别 貌似没有区别l ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- T-SQL 基础学习 01
--新建数据库 create database Studentdb go --使用数据库 use Studentdb go --新建表 create table Username ( StudentN ...
- XML基础学习01
XML学习 1:XML:可扩展的标识语言,是一种描述结构数据的格式,简化了网络中数据交换和表示,使得代码,数据和表示分离,并作为数据交换的标准格式,被称为智能数据文档. 2:当我们不使用数据库来存储数 ...
- java基础学习01
学习主意:边看视频,边编写代码,学习成果体现在代码
- [AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
- pyqt listview基础学习01
from decimal import * from PyQt4.QtGui import * from PyQt4.Qt import * from PyQt4.QtCore import * im ...
- c语言基础学习01
=============================================================================每一种语言都有其独特的语法规则与语言定义. 指 ...
- Python基础学习01
1.编译型解释型语言区别: 编译型:一次性将全部代码编译成二进制文件,代表c,c++ 优点:执行效率高 缺点:开发速度慢,不能跨平台 解释型:当程序运行时,从上至下一行一行执行,解释成二进制去执行 优 ...
随机推荐
- C 语言 struct 第一个成员变量的妙用
一.双重身份 如下定义了一个 School 结构体: typedef struct School { int a; int b; }SCHOOL_S; SCHOOL_S stSch; 下面我们来输出一 ...
- 写个续集,填坑来了!关于“Thread.sleep(0)这一行‘看似无用’的代码”里面留下的坑。
"我报名参加金石计划1期挑战--瓜分10万奖池,这是我的第2篇文章,点击查看活动详情" 你好呀,我是居家十三天只出了一次小区门的歪歪. 这篇文章是来填坑的,我以前写文章的时候也会去 ...
- 论文解读(FedGAT)《Federated Graph Attention Network for Rumor Detection》
论文信息 论文标题:Federated Graph Attention Network for Rumor Detection论文作者:Huidong Wang, Chuanzheng Bai, Ji ...
- Spring boot定义多个配置文件并自由切换
在resource目录下定义三个配置文件 (properties文件已被我注销,配置文件建议用yml,如果properties文件与yml文件同时存在,SpringBoot会优选加载propertie ...
- [题解] Atcoder AGC 005 F Many Easy Problems NTT,组合数学
题目 观察当k固定时答案是什么.先假设每个节点对答案的贡献都是\(\binom{n}{k}\),然后再减掉某个点没有贡献的选点方案数.对于一个节点i,它没有贡献的方案数显然就是所有k个节点都选在i连出 ...
- Skywalking Swck Agent注入实现分析
项目地址: GitHub - apache/skywalking-swck: Apache SkyWalking Cloud on Kubernetes 项目简介: A bridge project ...
- SpringBoot常用场景
SpringBoot-常见场景 1.热部署 SpringBoot为我们提供了一个方便我们开发测试的工具dev-tools.使用后可以实现热部署的效果.当我们运行了程序后对程序进行了修改,程序会自动 ...
- H5与APP的交互框架(WebViewJavascriptBridge)
基本原理是: 把 OC 的方法注册到桥梁中,让 JS 去调用. 把 JS 的方法注册在桥梁中,让 OC 去调用.(注册自己,调用它人.) WebViewJavaScriptBridge 使用的基本步骤 ...
- PHP全栈开发(八):CSS Ⅶ 表格 style
表格默认是没有边框的,因此,我们在设置表格格式的时候,首先要设置的是表格边框的样式,也就是 table{ border-style:solid; } 设置完表格表格的样式之后,可以设置表格边框的粗细程 ...
- CentOS 7.9 安装 nginx-1.22.0
一.CentOS 7.9 安装 nginx-1.22.0 下载地址:http://nginx.org/en/download.html 2 安装前的准备 # 操作系统内核版本 uname -a # 操 ...