锐单电子商城，一站式电子元器件采购平台！

电话：400-990-0325

前端基础学习——带你全面掌握HTML语言

时间：2022-09-10 14:30:00 1000w100rj电阻

一. 认识HTML

1.1HTML简介

1.2.常用的主流浏览器

1.3.常用的前端开发工具

1.4HBuilder或HBuilderX的快捷输入

1.4.1 嵌套 >

1.4.2 并列

1.4.3 重复 *

1.4.4 返回 ^

1.4.5 分组 ()

1.4.6 属性 []

1.4.7 编序 $

1.4.8 内容 {}

1.4.9 其他

二.HTML语法

2.1.HTML文档的基本结构

2.1.1 HTML5标准模板

2.2 head部分的HTML标签

2.2.1标题标签

2.2.2meta标签

2.3 body部分的HTML标签

2.3.1 常用HTML标签

2.3.2 绝对路径和相对路径

2.3.3 列表标签

2.3.4 表格标签

2.3.5 表单标签

2.3.6 容器标签div与span

2.3.7 HTML5新增标签

三. 前端学习专栏

一. 认识HTML

1.1HTML简介

HTML :超文本标记语言(HTML HyperText Markup Language )。

HTML文档是一个标记（tags）的.html文件（.htm）。无需编译即可解释客户端浏览器的语言。

HTML语言是通过各种标记来识别文档的结构，以及超链接、图片、文本、段落、表格等信息。

1.2.常用的主流浏览器

谷歌浏览器(chrome)： 浏览器使用配额最高的浏览器。占份额超过40%。速度快。HTML5支持最好。

火狐浏览器(firefox)：小巧方便快捷HTML支持也很好。

欧鹏浏览器(opera)：速度快，但使用起来不方便。许多播放器需要内部的特殊插件。下载插件不支持中文界面，使用特别不方便。

IE浏览器(IE)： windows该系统自带浏览器。由于微软的垄断，兼容性最差。市场份额逐年下降。

1.3.常用的前端开发工具

VSCode
Visual Studio Code (简称 VSCode / VSC) 它是一个免费开源的现代轻量级代码编辑器，支持语法亮点、智能代码补充、自定义热键、括号匹配、代码片段几乎所有主流开发语言的代码对比 Diff、Git 支持插件扩展，优化网页开发和云应用开发。跨平台支持软件 Win、Mac 以及 Linux，运行流畅，可谓微软良心之作……

Sublime
同时支持编辑器Windows、Linux、Mac OS X等待操作系统。他的操作界面非常整洁美观，文本功能也非常强大，操作速度非常快，非常适合编写代码，写文章做笔记。它还支持许多插件的扩展，以实现强大的联手，如：Emmet插件、JsFormat、SideBarEnhancements、TrailingSpaces、Tag等。

Dreamweaver
Adobe Dreamweaver梦想编织者，简称"DW"、这是一个整合了网页制作和管理网站的所见所得的网页编辑器。它可以很容易地创建一个动态的网页，跨越平台限制和浏览器限制。

WebStorm
这款JavaScript相信开发工具JS你必须知道开发者，它被称为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"，功能主要包括：JavaScript,编辑语言，创造一个方便的环境相信你一定很熟悉，这里就不赘述了

HBuilder
HBuilder是DCloud(数字天堂)推出支持HTML5的Web开发IDE。HBuilder用于编写Java、C、Web和Ruby。HBuilder主体本身就是由Jav编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

1.4 HBuilder或HBuilderX的快捷输入

1.4.1 嵌套 >

输入div>ul>li，按下Tab键：

1.4.2 并列 +

输入div+p，按下Tab键

1.4.3 重复 *

输入li*3，按下Tab键

1.4.4 返回 ^

输入ul>li*3^p，按下Tab键

1.4.5 分组 ()

输入(ul>li*2)+p，按下Tab键

1.4.6 属性 []

输入input[name=user value=123]，按下Tab键

输入div#header+div.box2+div.box3#footer，按下Tab键

1.4.7 编序 $

输入ul>li.$*3，按下Tab键

1.4.8 内容 {}

输入ul>li{$}*3，按下Tab键


	1
	2
	3

1.4.9 其他

在CSS中还有许多快捷输入机巧。如：

输入w100，按下Tab键，快捷输入width: 100px;

输入h100，按下Tab键，快捷输入height: 100px;

输入poa，按下Tab键，快捷输入position: absolute;

输入por，按下Tab键，快捷输入position: relative;

输入tdn，按下Tab键，快捷输入text-decoration: none;

输入db，按下Tab键，快捷输入display: block;

输入df，按下Tab键，快捷输入display: flex;

输入fdc，按下Tab键，快捷输入flex-direction: column;

输入bd1px#cccsolid，按下Tab键，快捷输入border: 1px #ccc solid;

二. HTML语法

2.1.HTML文档基本结构

2.1.1 HTML5标准模板




     
     
          
          
     
     
     
         
         hello world!

HTML语言不区分大小写。

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2.2 head部分的HTML标签

2.2.1 标题标签

我的第一个html文件

2.2.2 meta标签

2.3 body部分的HTML标签

2.3.1 常用HTML标签

1）标题标签（块级标签：独占一行）

这是一级标题标签
这是二级标题标签
这是三级标题标签
这是四级标题标签
这是五级标题标签
这是六级标题标签

2）段落标签（块级标签：独占一行）

这是一个段落标签

3）换行标签（单标签）

这是一个段落标签。
这个段落的内容是：如何更好的学习html

4）图片标签（内联标签：不独占一行）（单标签）

图片标签属性：

src：图片地址

alt：图片的替代文字

title：鼠标悬停提示文字

5）超链接标签（内联标签：不独占一行）

超链接标签属性：href：跳转路径

跳转到百度

注意：a标签中可以放置任何可视标签，比如：img、h1、p等。

6）使用超链接标签实现锚记

什么是锚记：当一个页面的内容过长时，浏览起来就会非常的费劲，需要不停的来回拖动。

解决方案是：可以在页面上的某个内容处设置锚记，然后使用超链接快速跳转到此处。

所以说：锚记类似于书签的功能。

书签
页面内容1
页面内容2
页面内容3
页面内容4
页面内容5
页面内容6
页面内容7
页面内容8

2.3.2 绝对路径与相对路径

1）绝对路径：以最原始位置为基准。

如果访问本机资源，以盘符开始：root+URI，如：D:/test/index.jpg

如果访问非本机资源，以网络协议开始：http://+URL，如：https://blog.csdn.net/weixin_53919192?type=blog

2）相对路径：以当前位置为基准（例如：当前位置是test），而且不能以 / 开始。

admin/login/index.jpg

./admin/login/index.jpg

./ 代表当前目录；

../ 代表上一级目录

2.3.3 列表标签

1）无序列表


    HTML语言
    CSS样式表
    javaScript语言

2）有序列表


    HTML语言
    CSS样式表
    javaScript语言

3）定义列表

dl：声明定义列表

dt：声明列表项

dd：定义列表项内容


    HTML
    制作网页的标准语言，控制网页的结构
    CSS
    层叠样式表，控制网页的样式
    JavaScript
    脚本语言，控制网页的行为

2.3.4 表格标签

表格标签多用于显示表数据。基本结构如下：

表格标签：

table：整个表格的最外层标签

tr：行标签

th：表格标题标签

td：列标签，一个td，就是一个单元格

表格标签属性：

border：边框宽度


    
        第一列
        第二列
    
    
        这是第一行第一列
        这是第一行第二列
    
    
        这是第二行第一列
        这是第二行第二列

第一列	第二列
这是第一行第一列	这是第一行第二列
这是第二行第一列	这是第二行第二列

表格合并：表格合并中两个重要属性：

colspan：合并列

rowspan：合并行


    
        这是第一行第一列
        这是第一行第三列
    
    
        这是第二行第一列
        这是第二行第二列
        这是第二行第三列
    
    
        这是第三行第二列
        这是第三行第三列

2.3.5 表单标签

表单是用户与应用程序进行交互的工具。

1）表单中的常用控件

2）form标签

form是表单最外层标签；

action属性：提交服务器地址；

method属性：提交方式：get、post；


    … … …

3）其它标签

文本框：

密码框

单选按钮
```
男
女
```
复选框
```
读书
体育
游戏
```
下拉列表
文件域
文本域
```
--这里输入个人简介--
```
提交按钮
重置按钮
普通按钮

4）表单中的一些属性

readonly：不可编辑,但可以选择和复制;值可以传递到后台

disabled：不能编辑,不能复制,不能选择;值不可以传递到后台

checked：设置单选按钮和复选按钮的默认选中项

selected：设置下拉列表option的默认选中项

注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：

checked="true"

checked="checked"

checked

这三种写法的效果都是一样的。

2.3.6 容器标签div与span

1）div标签：

块级标签，可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。


    html语言
    html语言是超文本标记语言

2）span标签：

内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

今天气温40度

2.3.7 HTML5新增标签

1）新增表单标签

注意：有些元素是为移动端浏览器设计的，所以有些效果只有在移动端浏览器中才能有效。

2）新增语义化结构标签

注意：语义化结构标签的应用，在网页布局章节中会有实际的应用。

三. 前端学习专栏

https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

这是第一行第一列		这是第一行第三列
这是第二行第一列	这是第二行第二列	这是第二行第三列
这是第二行第一列	这是第三行第二列	这是第三行第三列

前端基础学习——带你全面掌握HTML语言

一. 认识HTML

1.1HTML简介

1.2.常用的主流浏览器

1.3.常用的前端开发工具

1.4 HBuilder或HBuilderX的快捷输入

1.4.1 嵌套 >

1.4.2 并列 +

1.4.3 重复 *

1.4.4 返回 ^

1.4.5 分组 ()

1.4.6 属性 []

1.4.7 编序 $

1.4.8 内容 {}

1.4.9 其他

二. HTML语法

2.1.HTML文档基本结构

2.1.1 HTML5标准模板

2.2 head部分的HTML标签

2.2.1 标题标签

2.2.2 meta标签

2.3 body部分的HTML标签

2.3.1 常用HTML标签

这是一级标题标签

这是二级标题标签

这是三级标题标签

这是四级标题标签

这是五级标题标签

这是六级标题标签

2.3.2 绝对路径与相对路径

2.3.3 列表标签

2.3.4 表格标签

2.3.5 表单标签

2.3.6 容器标签div与span

html语言

2.3.7 HTML5新增标签

三. 前端学习专栏

相关文章