Google Protocol Buffer
770
2022-05-30
前端基础一之HTML篇
@[toc]
题外话
前言
身为一个合格的后端开发人员
前端的基础知识也是需要了解的
1. 网页
W3C规定网页由三部分组成：结构，表现，行为。
结构指的就是HTML
表现指的是CSS
行为指的是JavaScript
这是网页的三部分，是由万维网联盟W3C规范的。
这节我们就来学习HTML，网页的结构。
1.1 什么是网页的结构，表现，行为
结构
HTML用于表现网页的结构
表现
CSS用于控制页面中元素的样式
行为
JavaScript用于响应用户操作
1.2 什么是HTML
HTML（Hypertext Markup Language）是超文本标记语言。
严格来说，HTML不属于编程语言，他是用标签的形式标示出网页不同的组成部分。
为什么说HTML不是编程语言呢？因为HTML没有解释器，写出来的代码可以通过浏览器直接浏览，不需要下载诸如jdk，Python之类的东西，也不需要配置环境。
1.3 运行/编写HTML
由于HTML是超文本标记语言，所以我们可以直接通过记事本来进行编写
或者也可以使用Notepad++，支持高亮
记事本代码写好之后，后缀名改为.html然后上级就可以看到我们代码的运行效果了
2. HTML基础
2.1 标签
标签由尖括号<>括起来，用于描述网页
2.2 元素
一个完整的标签称之为元素，有开始有终止，有内容
HTML元素以起始标签（<>）开始，以结束标签（）闭合
元素内容是起始标签与结束标签之间的内容。
某些HTML元素具有空内容
空元素在开始标签中关闭
2.3 属性
我们可以通过<标签 a = “属性”>的方法设置属性，属性可以为HTML元素附加属性
属性是以键值对的形式出现的
下面会示范一下常用的标签
2.4 HTML的hello world
这样，把文件名改为hello.html双击打开，就可以看到hello world。
2.5 标签的嵌套
大多数标签都支持嵌套
这是段落
这是段落里面的第一段
这是段落里面的第二段
页面展示：
这是段落
这是段落里面的第一段
这是段落里面的第二段
3. HTML常用标签
3.1 标题
标题由h+数字标签来实现，共有六级标题
一级标题
二级标题
六级标题
下面是显示结果
一级标题
二级标题
3.2 链接
链接以a标签来实现
下面是网页显示
这是一个链接
3.3 段落
段落用p标签来实现
好家伙，好家伙，这是第一段
好家伙，好家伙，这是第二段
下面是网页显示
好家伙，好家伙，这是第一段
好家伙，好家伙，这是第二段
3.3 图片
图片用img标签来实现
图片说明
下面是网页显示，因为图书不存在，所以不会显示
图片说明
3.4 换行
用
标签表示换行
这是
效果
下面是网页显示
这是
效果
3.5 列表
设置一个有序列表
- 第一个
- 第二个
显示结果：
第一个
第二个
设置一个无序列表
- 第一个
- 第二个
显示结果：
第一个
第二个
3.6 表格
创建一个表格：
| id | age | name | sex |
显示结果：
多行显示：
| id | age | name | sex |
| 1001 | 20 | 布小禅 | men |
不要问为什么这么写，这是标签，没有为什么，这是规定
当然，刚刚的表格其实不是很正确，我们要定义第一行的东西的话，需要用到这个标签
3.7 注释
顾名思义就是给我们的代码做解释的标签
注释不会被计算机识别，也就是说，注释并不会影响运行结果
就像这样，下面是上面代码的运行结果：
3.8 块
什么是块呢？
我们通过
定义一个html代码块，我们可以css给div代码块设置属性的方式设置整个div代码块的样式。Title Hello World! Title Hello World! Title Title Title Title
代码：
This is a header
This is a paragraph.
效果：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
而标签被用来组合文档中的行内元素。
就是把某行元素的特定部分包装起来
代码：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
效果：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
3.9 表单
通过
效果这样：
当然，我们一般都会有一个登录/注册的按钮
这需要标签的submit属性
而效果是这样：
而有时我们的表单并不仅仅是这么简陋
比如你常见的，让你选择职业，性别之类的
这个就需要用到
个人信息采集
效果：
而拿了登录会干嘛呢？
会把你的信息提交，这需要一个action属性
不设置默认为提交到当前页面，并且只会提交带有name属性的数据
当然这个我们现在随便设就可以，反正人家的服务器也不会收
我这边是便写了一个空的html文件
个人信息采集
效果：
个人信息采集
因为提交方式为get（默认），所以点击登录后，会跳转到那个空白的HTML，然后url会把你所有带有name属性的数据展示出来
而怎么规避这个情况呢？
需要一个属性：method
不设置默认为get请求
个人信息采集
这样点击提交后就不会显示带有name属性的数据
结语
兴趣是最好的老师，坚持是不变的真理。
学习不要急躁，一步一个脚印，踏踏实实的往前走。
每天进步一点点，日积月累之下，你就会发现自己已经变得很厉害了。
我是布小禅，一枚自学萌新，跟着我每天进步一点点吧！
HTML web前端
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
推荐文章
最近发表
