当前博客:[HTML,CSS]前端基础1

324 次浏览

博客作者:【四面南墙】

个性签名:增强知识,努力学习

<!DOCTYPE html>

DOCTYPE表示文档类型

整个网页必须被包裹,它里面有两部分。

head标签表示网页的配置

body标签, 网页的正式内容,浏览器可视区域

 

标签有一个属性lang,是英语language语言的意思,表示整个网页的主体语言。

en表示英语。中文的表示法有三种。zh、cn、zh-CN。

需要注意的是,无论哪种语言,都使用英文开发。

<html lang="en">
<html lang="zh-CN">

字符集

在head标签对儿中,是一个个文件的配置。几乎所有的配置都是写在meta标签中的。

meta就是“元”的意思,表示基本配置。

首先映入眼帘的是配置字符集:

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

charset是英语character set文字集合的意思。

什么是字符集呢?

在计算机中所有的字实际上都是按某种规律排列而成。这个规律是什么呢?不同的字符集有不同的规律。

不同字符集中的字,在计算机内部表达不一样的:

字符集 字库涵盖范围 优缺点
UTF-8 这个字库涵盖了地球上所有国家、民族的语言文字。非常全,每年更新,它是一个国际化的字库 每个汉字占3个字节。所以如果你想网页快一点打开,不能使用UTF-8。
gb2312 gb是国标的意思,只有汉族的文字和少量其他符号。 每个汉字占2个字节。几乎所有的门户网站都是gb2312。
gbk gbk是gb2312的略微增强版,文字稍微多了点, gbk也是只有汉语,只不过多了点怪异汉语字,比如“喆”。 每个汉字占2个字节。几乎所有的门户网站都是gbk。

什么时候使用utf-8,什么时候使用gbk?

答:如果你的网页使用场景是面向群体是国际化的,使用utf-8,比如中华网;如果面向群体主要是国内,使用gbk比如腾讯网

如何修改字符集,比如我们现在的字符集是gbk,修改为utf-8


title

title就是在浏览器选项卡的区域显示的文字:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是网页标题</title>
</head>
<body>

</body>
<html>

 


HTML基本语法

? 标签名必须书写在一对尖括号<>内部。

? 标签分为单标签和双标签,双标签必须成对出现,有开始标签和结束标签。

? 结束标签必须有关闭符号/。

? 根据标签内部存放的内容不同,将不同的标签划分为两个级别

存放内容的地方

单标签

双标签

img

h1-h6

br

div

hr

span

 

p

根据标签的种类区分两个等级,分别是容器级和文本级

容器级:元素内部除了可以存放文本之外,还可以嵌套标签

文本级:元素内部只能存放文本或者文本级标签

容器级标签

文本级标签

div,ol,ul,li,dl,dt,dd,h1-h6

span,img,b,u,i

标签属性

标签属性是标签身上的一些特殊性质,通俗讲,给标签加上某个属性就相当于给标签赋予了职能,前提是标签必须具备这些职能

书写位置:在开始标签或单标签的标签名后面,添加一个空格,空格后面书写属性。

属性包含属性名(key)和属性值(value)两部分,根据英文表示,习惯将属性写法称为键值对写法,标签属性的键值对写法是:k=”v”

<a href="www.baidu.com" title="我是title"></a>

标签之间对空白换行缩进不敏感

文字的位置不会根据书写标签位置决定,而是根据标签的种类决定(块级还是行内级,后面CSS课程中讲)

标签与其他标签之间对空白、换行、缩进等不敏感,有没有空白不影响浏览器加载效果

HTML语法中,认识标签的开始和结束,不论有没有换行都只认标签开始结束

标签之间还认识嵌套关系

在书写过程中,为了让代码是容易解读的,建议进行合理的换行和缩进

在上传代码过程中,为了提高传输速度,可以将代码进行压缩,删除多余的空白,目的就是问了压缩文件的大小

 

文本的空白折叠现象

在普通文字之间,如果有空格、换行、缩进导致的空白,在浏览器中加载时会被折叠成一个空格显示,这就是空白折叠现象

一些空白要想在浏览器中正常显示,需要使用一些替换写法书写不同的空白。

空格:可以使用字符实体替换书写,在代码中书写&nbsp;替换空格

换行:可以使用br单标签进行书写进行书写

<p>
        你好                           我是张三
</p>

上面你好之后的空格会被折叠为一个空格,这种现象叫做空白折叠现象

如果需要给文本增加多个空格需要使用字符实体 

<p>
        你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是张三
</p>

你好       我是张三


HTML常见标签

h系列标签

包含一共六级标题,有h1,h2,h3,h4,h5,h6

都是双标签,容器级标签

作用:给内部内容添加对应级别标题的语义

标签根据重要性不同,认为权重不同,所有的标题标签的权重都比别的标签要高

h系列标签的基本使用

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

我是h1标签

<h1>我是h1标签</h1>

我是h2标签

<h2>我是h2标签</h2>

我是h3标签

<h3>我是h3标签</h3>

我是h4标签

<h4>我是h4标签</h4>
我是h5标签
<h5>我是h5标签</h5>
我是h6标签
<h6>我是h6标签</h6>

从我们对文本的定义来讲,权重就是文本的权重,比如设置h标签的文字就富裕了标题的语义

如果从浏览器的角度去考虑,它的权重在搜索引擎的优化,搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容,h1标签的权重是最高的,一个页面只使用一个h1,通常用来制作网页的logo,如果你在页面中设置了多个h1标签,搜索引擎会认为你在作弊,从而降低排名

P标签

双标签,文本级标签

作用:添加一个完整段落的语义

<p>我是p标签</p>

img标签

单标签,文本级标签

作用:在指定位置插入一张图片

img标签的属性

1) src: 作用是引入图片的路径

2) alt: 图片加载不出来时候的替换文本

<img src="images/345345.jpg" alt="我是利快云用户">

img的宽高设置

width: 设置图片的宽度

height: 设置图片的高度

<img src="images/1.jpg" alt="我是利快云用户" width="220px" height="10px">

实际工作中宽度和高度并不会共同使用,因为如果只单独设置一个属性比如宽度,高度会等比例进行缩放

title:作用是设置鼠标以上图片时候的悬停文本

<img src="images/1.jpg" title="利快云用户">
1)	border:作用是给图片添加边框
<img src="images/0.jpg" alt="我是利快云用户" border="10" width="220px">

border:作用是给图片添加边框

图片的border属性用来了解就可以了,因为我们真正加边框的时候是通过CSS实现的,因为边框不可能只有黑色

相对路径和绝对路径

相对路径:从html文件出发,找到对应图片位置的路径

如果进入到某个文件夹使用‘/’,如果出某个文件夹使用‘../’

引入路径

<img src="images/1.jpg" alt="">

如果需要出多个文件夹,使用多个../

<img src="../1.jpg" alt="">
如果需要出多个文件夹,使用多个../
<img src="../../1.jpg" alt="">

绝对路径:主要分为盘符绝对地址,和网站的绝对地址

通过c盘根目录出发去查找你对应文件位置,工作中不使用这种方法,因为服务器没有c盘...这些目录

网站的绝对地址

<img src="https://www.lkuaiy.com/image/img/logo1.png" alt="">

锚点a标签

双标签,文本级标签

作用:在指定位置添加一个超级链接,从而实现相应的跳转

a标签有几个属性,是给超级链接添加相应的作用

1) href: 超文本引用

<a href="http://www.baidu.com">跳转到百度</a>

上面的代码href属性跳转到百度网站,这个是绝对路径,我们也可以设置相对路径跳转

<a href="123.html">跳转到123文件</a>

target:作用是是否在新标签打开链接,值一定是”_blank”

<a href="123.html" target="_blank">跳转到123文件</a>

title属性:作用是鼠标移上文字之后的悬停文本

<a href="123.html" target="_blank" title="鼠标移上的文字">跳转</a>
Generic placeholder image
手可摘星辰 Time: 2021-10-15 13:19:11

老哥;你这个黑窗口里面都是什么内容呀


[HTML,CSS]前端基础1