前端基础入门(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.行标签

特点:

  1. 一个个相互跟着显示,直到遇到父级边框换下一行;
  2. 无法设置高度和宽度,只能随字体高度和宽度(文本内容撑开);
  3. 不支持上下外边距(margin-top和margin-bottom没有效果)
  4. 不正常显示上下内边距(可能会覆盖其他文本)
  5. 代码中的换行会解析(在显示中有间隙)

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.行块标签

特点:

  1. 同排序跟显示,遇到父级边界换行
  2. 没有宽高的时候内容撑开宽高
  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{
    属性:值;
}
  • 子元素选择器之间需要用>符号连接, 并且不能有空格
  • 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海绵hong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值