前端基础入门（html+css+详）
html：样式，css：结构，js：行为（动态效果和算法）
目录
html：样式，css：结构，js：行为（动态效果和算法）
一.HTML入门
1.块标签：
2.行标签
3.行块标签
4.行块标签的互换
二.css（网络的样式）
背景色
背景图：
文本
常用选择器
通配符选择器
类选择器（class）
id选择器
后代选择器
群组选择器
子代选择器
一.HTML入门
<!DOCTYPE html>
<!--使用HTML5的标准进行文档解析 -->
<html lang="en"><!--跟标签，平时不做修改-->
<head><!--引入与网页相关的描述及配置信息--><meta charset="UTF-8"><title>Title</title><style>div{width:100px;height: 20px;color: #c70012;background-color: aqua;}</style>
</head>
<body>
<!--正文-->
<div>海绵hong</div>
</body>
</html>
1.块标签：
（特点：独占一行，默认高度占满父级，高度为0，子级内容撑开高度）
div：区域标签没有任何语义，可以做任何的事情（你想让他是啥，他就可以是啥）
h1-h6：标题标签，h1（大标签，一个页面只能写一次）
h2（副标题，建议不要超过八个）
h3（小标题，没有个数限制）
h4-h6（小内容）
p：段落标签（代表一个段落）
列表：ul，ol，li ul(无序排列)，ol（有序排列）li（列表项配合ul和ol使用有奇效）
<ul><li>海绵hong</li><li>好好学前端</li><li>找个好工作</li>
</ul><ol><li>海绵hong</li><li>好好学前端</li><li>找个好工作</li>
</ol>H5新增标签：article：代表文章的区域
nav导航栏
header：头部信息
aside:侧边栏
section：区域的意思（文章中替代div）
footer：底部信息
2.行标签
特点：
- 一个个相互跟着显示，直到遇到父级边框换下一行；
- 无法设置高度和宽度，只能随字体高度和宽度（文本内容撑开）；
- 不支持上下外边距（margin-top和margin-bottom没有效果）
- 不正常显示上下内边距（可能会覆盖其他文本）
- 代码中的换行会解析（在显示中有间隙）
span：和div一样被经常使用（没有语义）
a：代表超链接（自带href代表超链接，target打开方式（默认_self:在当前页面显示覆盖这个页面，改为_blank则会显示另外一个也米娜打开链接））
em（or）i：倾斜，多使用em，减少被爬虫
strong（or）b：加粗，多使用strong，减少被爬虫
sub：下角标
sup：上角标（写次方的时候的次方）
<p>3<sup>2</sup></p><br>
<p>O<sub>2</sub></p>
3.行块标签
特点:
- 同排序跟显示，遇到父级边界换行
- 没有宽高的时候内容撑开宽高
- 换行被解析src:资源路径
img（图片）:
- src:资源路径
- title:鼠标悬停时的提示文本
- alt:图片不能正常显示的提示文本
特点：只给宽度或高度，会等比例变化
button：标签定义一个按钮。
4.行块标签的互换
display：inline（行）
block（块）
<head><!--引入与网页相关的描述及配置信息--><meta charset="UTF-8"><title>Title</title><style>span{display: block;}</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
span行标签变块标签
二.css（网络的样式）
内部样式：
<style type="text/css">标签名称{属性名称: 属性对应的值;...}
</style>注意点
- style标签必须写在head标签的开始标签和结束标签之间。
- style标签中的type属性可以不用写, 默认就是type=“text/css”
- 设置样式时必须按照固定的格式来设置。key: value；其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
外部样式
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用
<link rel="stylesheet" href="../css/text01.css">内联样式
<p style="color: #c70012">hong</p>背景色
width:宽度
height：高度
background-color：三种方式：1.直接单词：例如：red
2.rgba（代表黄绿蓝和透明度）：例如：rgba（255，0，0，0）黄色，a的范围是0到1其他的为0到255
3.十六进制：例如：#ff000红
背景图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/text01.css"><style>img{width: 500px;}
div{width: 800px;height: 450px;background-color: #c70012;background-image:url("../download.jpg");background-size: 310px,275px;background-repeat: no-repeat;/*取消重复&*/}</style>
</head>
<body>
<div>海绵hong</div><img src="../download.jpg" /></body>
</html>
如果没有background-repeat: no-repeat;//取消重复图片背景就会平铺
background-size: auto,100px;/*只想给高度可以用auto*/ /*background-size: contain;//高度占满父级*/background-size: cover;/*宽度度占满父级*/ background-position:center,center ;/*可以是center，left，right，top这些方位词，也可以是长度（从图片左上角为原点，x和y的距离）*/
文本
font-size：字号大小
属性值了可以使用相对长度单位em，推荐使用像素单位px。
注意：em：是相对单位，1em=父级标签字体大小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{font-size: 20px;}p{font-size: 2em;}</style>
</head>
<body>
<p>海绵hong</p>
</body>
</html>因此海绵hong是40px
font-weight: 字体粗细
属性值默认normal，可以设置加粗bold,更粗bolder，或者100,200···
font-family:字体
属性值通常可以设置为黑体、微软雅黑、宋体···
text-align: 文本对齐方式
属性值默认left左对齐，可以设置为center居中，也可设置right右对齐。
text-indent:首行缩进（2em最合适）
属性值可以为不停单位的数值，em字符宽度的倍数，或者相对浏览器的百分比，允许使用负值。
font-style:字体风格
属性值默认为normal，可以设置xieti 样式italic,或者oblique。
letter-spacing:字体间距
word-spacing：单词间距
text-decoration:修饰线
属性值默认是none，可以设置下划线underline，删除线line-through（从中间穿过），上划线不常用。
text-transform：大小写
属性值是uppercase（全部变成大写），lowerase（全部变成小写），capitalize首字母进行大写
font:
复合属性，font:font-style font-weight font-size/line-height font-family
前两个属性可以省略或者调换位置，后面的两个都不可以。
line-height：行间距
单位通常使用px,em或者百分比。1）如果是子标签是男标签，行高可以撑起子标签的高度 。2）如果是子标签是女标签，行高不能撑起子标签的高度
color:文本颜色
属性值可以是十六进制表示颜色，或者英文单词，或者用rgb表示。
常用选择器
通配符选择器
（1）作用
给当前界面上所有的标签设置属性
（2）格式
*{属性:值;
}类选择器（class）
可是让同一个标签有不同的样式（根据指定的类名称找到对应的标签, 然后设置属性）
.类名{属性:值;
}注意：
- 在同一个界面中class的名称是可以重复的
- 类名的命名规范和id名称的命名规范一样
- 在HTML中每个标签可以同时绑定多个类名
id选择器
id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，css选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。
#id名称{属性:值;
}一个id名在同一个html文件只能出现一次
后代选择器
当我们的标签嵌套比较深之后，我们在写一些东西的时候使用后代选择器比较方便
找到指定标签的所有特定的后代标签, 设置属性（就是标签里面的标签，可以单独设置属性）
写的越具体精准度就越高
标签名称1 标签名称2{属性:值;
}- 后代选择器必须用空格隔开
- 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div ul li p{color: red;}</style>
</head>
<body>
<div><ul><li><p>我是段落</p> </li><li><p>我是段落</p> </li></ul>
</div>
</body>
</html>群组选择器
一选选一群
标签1，标签2{
属性
}可以是多个标签，标签内的样式都一样
子代选择器
找到指定标签中所有特定的直接子元素, 然后设置属性（只有子代的样式会发生变化和后代选择器不同）
标签名称1>标签名称2{属性:值;
}- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
前端基础入门（html+css+详）相关推荐
- 前端基础入门之css像素与视口和媒体查询
文章目录 像素与视口 像素 视口(viewport) 手机像素 完美视口 vw单位 vw 常见的设计图宽度 vw适配 rem 媒体查询 响应式布局 媒体查询 媒体查询语法 媒体类型 媒体特性 断点 像 ...
- 前端基础入门之css定位 position
定位的简介 需求分析 按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
- 前端基础入门之css字体相关
文章目录 字体 1. 字体相关的样式 2. font-family 3. 几种字体 手写体 艺术体 乱码字体 中文字体 4. @font-face 5. 图标字体(iconfont) 图标字体简介 f ...
- HTML完结《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.24
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整 ...
- 日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23
一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解,源码均可直接复制运行 配套PPT,站点源码,等学习资料请加文章封面联 ...
- 〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果
当前子专栏 基础入门三大核心篇 是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...
- 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用
当前子专栏 基础入门三大核心篇 是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...
最新文章
- Linux常见命令（二）
- 微信公众平台消息接口开发（13）多语种互译
- opencv 梯度幅值_opencv3/C++ HOG特征提取方式
- 《 双城记 》：无数的平民拥有的只是和她同样的眼睛 ...
- Groovy的基础语法
- World Wind Java开发之十五——加载三维模型（转）
- 初学者python笔记（列表的食用方法）
- string是python内置函数吗_Python 字符串与内置函数（方法）
- 遵循PSR-4的自动加载
- 小程序首次获选世界互联网领先科技成果
- Adobe公司和谷歌公司共同开发的字体-思源黑体提供下载
- 正则表达式与自动机c语言,用有限自动机实现正则表达式的匹配
- ArcGIS学习总结（六）——地形分析-DEM应用
- Unity Bounds的理解
- 德州大学奥斯汀分校计算机专业排名,德州大学奥斯汀分校专业排名一览及最强专业推荐（USNEWS美国大学排名）...
- M3U8视频解密下载
- 辉芒微FT61F023,FT61F011A
- IE8的调试工具使用详解
- 编译Android源码(9.0)
- 计算机系学不学工程力学,工程力学专业属于什么门类