css基本结构

最新推荐文章于 2022-07-04 14:09:22 发布

l__ll__l

最新推荐文章于 2022-07-04 14:09:22 发布

阅读量627

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/l__ll__l/article/details/120407611

版权

写一个页面所需要的几门语言

html: 它是一个超文本标记语言，为什么是超文本呢？因为它不仅可以单纯的表示文字，还可以表示音频、视频、图片等。（骨架）
css：层叠样式表，它主要是用来美化页面的。（衣服、化妆品）

js：javascript是一门轻量级的编程语言。例如：页面中的点击事件，以及一些业务逻辑（行为和动态）

标签的特点

都是有尖括号括起来
成对出现，由开始标签和结束标签组成

结束标签比开始标签多了一个反斜杠

特殊情况：有一些标签例如 img、meta 并不是成对出现的，这类标签叫做“单标签”或者是“空标签”或者是“自闭合标签”

标签的属性

标签的属性：属性提供了有关 HTML 元素的更多的信息，用来描述某个特征和功能的。可以分为内置属性和自定义属性。

表现形式：属性总是以名称/值对的形式出现，比如：name="value"。（键值对）注意的细节：

属性总是在 HTML 元素的开始标签中规定（跟在关键词的后面）以键值对的形式出现元素可以有多个属性，
属性和属性之间至少要有一个空格

属性是没有先后顺序的

例如下面的例子：

<img src="a.jpg"  alt="欢迎你们加入第十二期css图片" title="加油">

html的基本结构

文档声明

声明帮助浏览器正确地显示网页 ;

定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档；

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面；

一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了(html5文档声明)

文档声明不区分大小写；

文档声明必须放在第一行(因为浏览器是从上到下解析的)

必须写文档声明，如果不写就会发生怪异事件；

文档声明不是一个标签，它只是一个声明；

<!DOCTYPE html>  // 文档声明，告诉浏览器以什么样的规范显示页面
<html>
<head>
<meta charset="utf-8"> //国际通用编码，防止乱码
<meta name="description" content="描述的内容">
<meta name="keywords" content="关键词">
<title>网页标题</title>
</head>
<body>
可视区
</body>
</html>

标题标签

标题标签可以分为六级，h1到h6，表象上看，由粗到细，字号由大到小。对于搜索引擎来说，它是由重要程度之分的。h1是最重要的，之后逐次递减。一般一个页面中只出现一次h1. 大部分用在logo

快捷生成：h${$级标题}*6
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

段落p

<p>段落</p>

图片

src：图片的路径
alt：当网比较慢或者是图片路径不正确，造成图片加载失败，那alt里面设置的如果有文字，就会出现在裂的图片旁边，更有利于用户体验

title：当鼠标滑上图片的时候，会出现title里面设置的文字，有一个跟随效果

<img src="http://img.mp.itc.cn/upload/20170110/b56b87be5f174eca81f9d06116aa1968.jpg" alt="火柴人图片" title="欢迎你们">

超链接 a标签

href:跳转的网址
target：

- _blank 在新窗口打开
- _self 在当前窗口打开

<a href="http://www.baidu.com" target="_self">百度</a>

a标签href的几个值

放的是网址： href=”http://www.baidu.com”
回到顶部：href=”#”

禁止跳转：href=”javascript:;”
锚点跳转：给每一个模块用id起一个名字，a标签里面的href的值应该是# 加上id里面的那个名字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
        div{
            /* 高度这个值和 行高一样的话，就会垂直居中*/
            height:500px;
            line-height: 500px;
            background:darkturquoise;
            margin-bottom:20px;
            /* 文字水平居中 */
            text-align: center;
        }
</style>
</head>
<body>
<div id="goods1">好店直播</div>
<div id="goods2">品质特色</div>
<div id="goods3">实惠热卖</div>
<div id="goods4">猜你喜欢</div>
<a href="#goods1">好店直播</a>
<a href="#goods2">品质特色</a>
<a href="#goods3">实惠热卖</a>
<a href="#goods4">猜你喜欢</a>
<a href="#">回到顶部</a>
</body>
</html>

l__ll__l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基本结构

写一个页面所需要的几门语言html: 它是一个超文本标记语言，为什么是超文本呢？因为它不仅可以单纯的表示文字，还可以表示音频、视频、图片等。（骨架） css：层叠样式表，它主要是用来美化页面的。（衣服、化妆品）js：javascript是一门轻量级的编程语言。例如：页面中的点击事件，以及一些业务逻辑（行为和动态）标签的特点都是有尖括号括起来成对出现，由开始标签和结束标签组成结束标签比开始标签多了一个反斜杠特殊情况：有一些标签例如 img、meta 并不是成对出现的，这类标签叫做“单标签
复制链接

扫一扫