写代码啦
HTML入门笔记1
回复数(0) 浏览数(20)
{{topic.upvote_count || 0}} 编辑 回复

今天学习了HTML简单的一些入门内容,现在写成博客整理一下。
1. HTML 是谁发明的
HTML 全称 HyperText Markup Language,超文本标记语言。是上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·博纳斯-李(Tim Berners-Lee),也就是我们所说的李爵士发明的。
2. HTML 的起手式
我用的是VSCode,打开VScode,然后创建一个HTML文件,右下角语言如果不是HTML可以改成HTML。然后输入一个!感叹号,再按Tab键,或者回车键,就会出现一大段代码。
这个就是起手式,每个HTML文件都需要有这么一些基本的设置。然后我们来稍微看看这些设置。
- <!DOCTYPE html>文档类型
- <html lang="en">这是html标签。可以把语言改成zh-CN,这样浏览器会知道这个界面主要用的是什么语言。
- 一般来说<head><body>标签不进行缩进
- <meta charset="UTF-8"> 文件的字符编码是utf-8,这个一般写在最前面,方便浏览器知道之后的文字用的是什么字符编码。
- content="width=device-width 禁用缩放,兼容手机端。
- content="ie=edge" 告诉IE,使用的是最新的内核。
3. 常用的章节标签
章节标签有很多,挑一些常用地简单说一下。
- h1~h6:标题。h1字体最大,往后越来越小。
- section:章节。表示用这个标签扩起来的是一个章节,章节可以嵌套章节。
- p:段落。表示用这个标签括起来的是一个段落。
- header:头部。可以放一些像导航之类的东西。
- footer:脚部。版权声明一般放在这里,&copy;这个就是版权符号©的写法。
- main:主要内容。这个标签里包括的是主体内容,像导航、侧边栏,版权等的东西不能放在里面。
- aside:旁支内容。这个标签里包括的是与主要内容无关的内容,比如侧边栏之类的东西,一般都放在这里。
- div:划分。division,应该是这个词的简写。div可以嵌套div。
4. 全局属性
全局属性就是所有标签都有的属性,有这些:
- class:class属性可以让一组标签都有同样的属性。
- contenteditable:是一个枚举属性,表示元素是否可以被用户编辑。
- hidden:hidden是一个布尔属性,表示元素是否隐藏。
- id:只有非常确定的唯一的属性用id,作为新手,能不用尽量不用。因为如果你两个元素用了同一个id,浏览器是不会报错的,你没有办法判断你是否只用在了一个元素上。
- style:这是元素的属性,所以他的优先级高于css设置的样式,但是可以被javascript所写的属性覆盖。
- tabindex:表示元素是否可以聚焦,并且在什么时候参与聚焦。当它是负数的时候,表示可以被聚焦,但是不能通过键盘访问到;当它是0的时候,表示可以被聚焦,并且可以通过键盘访问到。数值越小,越可以先被访问到。通常给予没有鼠标的用户设置这个属性。
- title:标题。这个标签只用在<head>块里。表示文档的标题。
5. 常用的内容标签
- ol+li:有序列表。
- ul+li:无序列表。
- dl+dd+dt:表格。
- pre:在这个标签里的内容会原封不动地输出到网页中,空格也会一模一样。
- hr:水平分割线。
- br:换行符。
- a:超链接。当你要在一个网页里插入一个链接,就需要用到这个标签。
- em:强调。通常显示是斜体,是一个语气上的强调。
- strong:强调。通常显示是加粗,这个和em有所不同,他表示的是他扩起来的内容本身就很重要。

这只是刚刚入门了解的一些HTML的标签,还有很多很多东西还没有学习,以后会慢慢深入,初级阶段就先聊到这里。

{{topic.upvote_count || 0}}

今天学习了HTML简单的一些入门内容,现在写成博客整理一下。
1. HTML 是谁发明的
HTML 全称 HyperText Markup Language,超文本标记语言。是上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·博纳斯-李(Tim Berners-Lee),也就是我们所说的李爵士发明的。
2. HTML 的起手式
我用的是VSCode,打开VScode,然后创建一个HTML文件,右下角语言如果不是HTML可以改成HTML。然后输入一个!感叹号,再按Tab键,或者回车键,就会出现一大段代码。
这个就是起手式,每个HTML文件都需要有这么一些基本的设置。然后我们来稍微看看这些设置。
- <!DOCTYPE html>文档类型
- <html lang="en">这是html标签。可以把语言改成zh-CN,这样浏览器会知道这个界面主要用的是什么语言。
- 一般来说<head><body>标签不进行缩进
- <meta charset="UTF-8"> 文件的字符编码是utf-8,这个一般写在最前面,方便浏览器知道之后的文字用的是什么字符编码。
- content="width=device-width 禁用缩放,兼容手机端。
- content="ie=edge" 告诉IE,使用的是最新的内核。
3. 常用的章节标签
章节标签有很多,挑一些常用地简单说一下。
- h1~h6:标题。h1字体最大,往后越来越小。
- section:章节。表示用这个标签扩起来的是一个章节,章节可以嵌套章节。
- p:段落。表示用这个标签括起来的是一个段落。
- header:头部。可以放一些像导航之类的东西。
- footer:脚部。版权声明一般放在这里,&copy;这个就是版权符号©的写法。
- main:主要内容。这个标签里包括的是主体内容,像导航、侧边栏,版权等的东西不能放在里面。
- aside:旁支内容。这个标签里包括的是与主要内容无关的内容,比如侧边栏之类的东西,一般都放在这里。
- div:划分。division,应该是这个词的简写。div可以嵌套div。
4. 全局属性
全局属性就是所有标签都有的属性,有这些:
- class:class属性可以让一组标签都有同样的属性。
- contenteditable:是一个枚举属性,表示元素是否可以被用户编辑。
- hidden:hidden是一个布尔属性,表示元素是否隐藏。
- id:只有非常确定的唯一的属性用id,作为新手,能不用尽量不用。因为如果你两个元素用了同一个id,浏览器是不会报错的,你没有办法判断你是否只用在了一个元素上。
- style:这是元素的属性,所以他的优先级高于css设置的样式,但是可以被javascript所写的属性覆盖。
- tabindex:表示元素是否可以聚焦,并且在什么时候参与聚焦。当它是负数的时候,表示可以被聚焦,但是不能通过键盘访问到;当它是0的时候,表示可以被聚焦,并且可以通过键盘访问到。数值越小,越可以先被访问到。通常给予没有鼠标的用户设置这个属性。
- title:标题。这个标签只用在<head>块里。表示文档的标题。
5. 常用的内容标签
- ol+li:有序列表。
- ul+li:无序列表。
- dl+dd+dt:表格。
- pre:在这个标签里的内容会原封不动地输出到网页中,空格也会一模一样。
- hr:水平分割线。
- br:换行符。
- a:超链接。当你要在一个网页里插入一个链接,就需要用到这个标签。
- em:强调。通常显示是斜体,是一个语气上的强调。
- strong:强调。通常显示是加粗,这个和em有所不同,他表示的是他扩起来的内容本身就很重要。

这只是刚刚入门了解的一些HTML的标签,还有很多很多东西还没有学习,以后会慢慢深入,初级阶段就先聊到这里。

20
回复 编辑