HTML5+CSS3+Javascrpit

最新推荐文章于 2022-09-29 09:25:47 发布

青树寒鸦

最新推荐文章于 2022-09-29 09:25:47 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/weixin_46119027/article/details/116504689

版权

网页的组成：W3C标准

在这里插入图片描述

纯文本编辑器，富文本编辑器

属性

设置标签中的内容如何显示
<h1>hello <font color="red" size='3'>world</font></h1>

hello world

## 实体在代码中的多个空格默认情况下会被浏览器解析为一个空格 b标签是加粗标签, 实体的语法：&+实体的名字:

& nbsp表示空格
& gt表示大于号
& copy表示版权符号

meta标签

<title>亚马逊-网上购物商城：要网购, 就来Z.cn!</title>
<meta name="description" content="亚马逊中国（z.cn）坚持“以客户为中心”的理念，秉承“天天低价，正品行货”信念，销售图书、电脑、数码家电、母婴百货、服饰箱包等上千万种产品。亚马逊中国提供专业服务：正品行货天天低价，机打发票全国联保。货到付款，30天内可退换货。亚马逊为中国消费者提供便利、快捷的网购体验。">
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
<meta name="google" content="nositelinkssearchbox">
<meta name="google-site-verification" content="BRIrL18qELSCSHu-BNlO7z9T0qAjBuunDmK8hLNTBI8">
<link rel="canonical" href="https://www.amazon.cn/">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta property="fb:app_id" content="164734381262">
<meta name="twitter:card" value="summary">
<meta name="twitter:site:id" value="20793816">
<meta property="og:description" content="亚马逊中国（z.cn）坚持“以客户为中心”的理念，秉承“天天低价，正品行货”信念，销售图书、电脑、数码家电、母婴百货、服饰箱包等上千万种产品。亚马逊中国提供专业服务：正品行货天天低价，机打发票全国联保。货到付款，30天内可退换货。亚马逊为中国消费者提供便利、快捷的网购体验。" xmlns:og="http://opengraphprotocol.org/schema/">
<meta name="baidu-site-verification" content="px8yGWK5e5" />
<meta name="msvalidate.01" content="3C8D6512B1E530046DE0569BA27093F3" />
<meta property="qc:admins" content="151133107161512766375" />
<meta name="360-site-verification" content="bd110b885b8997880a215e7967f6eacf" />
<meta name="shenma-site-verification" content="284a51a948242d608c9293a9b0c8c04e" />

块元素

在页面上会独占一行
hx标题标签、p标签

行内元素

在页面上不会独占一行
em：斜体
strong：加粗
blockquote：引用常语
q：引用短语
在这里插入图片描述

超链接标签

<a href="#">回到顶部</a>
target属性：用来指定超链接打开的位置，可选值
_self：默认值，在当前页面打开超链接
_blank：在一个新的页面打开超链接
<a href="#">##</a>
<a href="javascript:;>###</a> 不会跳转的超链接

id属性

每个标签都有一个id属性，唯一属性，不能重复。
可以在超链接标签的href属性上写上某个标签的id。

内联框架

<iframe src="https://www.baidu.com"></iframe>
在此处显示一个网页

CSS

外部标签用link标签引入，称为外部样式表
在这里插入图片描述
元素选择器：元素名
ID选择器：元素的id
class类选择器：class是标签的一个属性，它和id类似，不同的class可以重复使用，可以通过class属性为元素分类，可以同时为多个元素指定多个class，多个class之间用空格隔开
通配选择器：用*表示

交集选择器

在这里插入图片描述

并集选择器（选择器分组）

在这里插入图片描述

伪类选择器

ul > li:first-child{
    color: chocolate;
}
ul > li:last-child{
    color: darkcyan;
}
ul > li:nth-child(3){
    color: crimson;
}
ul > li:first-of-type{
    color: darkgoldenrod;
}

<ul>
    <span>span</span>
    <li title="li 0">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

在这里插入图片描述

超链接的伪类

/*表示未访问过的链接*/
a:link{
    color: red;
}
/*表示访问过的链接*/
a:visited{
    color: darkcyan;
}
/*表示鼠标移入的状态*/
a:hover{
    font-size: 80px;
}
/*表示鼠标点中的状态*/
a:active{
    color: yellowgreen;
}

伪元素

p.cx::first-letter{
    font-size: 30px;
}

在这里插入图片描述

样式的继承

背景相关的样式不会继承

选择器的优先级（权重）

内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式没有优先级

em

em是相对于元素的字体大小来计算的，1em=1font-size，em会根据字体大小的改变而改变

青树寒鸦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3+Javascrpit

网页的组成：W3C标准纯文本编辑器，富文本编辑器标签head标签里的元数据不在页面上展示所有要在页面上显示的内容都写在body标签里HTML的注释不能嵌套<!Doctype html>表示是HTML5属性设置标签中的内容如何显示<h1>hello <font color="red" size='3'>world</font></h1>hello world## 实体在代码中的多个空格默认情况下会被浏览器解析为一个空格b
复制链接

扫一扫