前端入门01 -- 前言，HTML，HTML标签

网页

网站：是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合；
网页：是网站中一页，通常是HTML格式的文件，它通过浏览器来阅读；
网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成，通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件；

HTML

HTML：是超文本标记语言，它是用来制作网页的一门语言；
HTML不是一种编程语言，而是一种标记语言；
标记语言是一套标记标签；
所谓超文本的含义如下：
- 它可以加入图片，声音，动画，多媒体等内容，超越了文本的限制；
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)；
网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的；

image.png

浏览器

浏览器是网页显示，运行的平台，常用的浏览器有IE，火狐，谷歌，Safari，Opera等五大浏览器；
浏览器内核：即渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面；

image.png

目前国内一般浏览器都会采用Webkit/Blink内核，例如360，UC，QQ，搜狗等等；

Web标准

Web标准：是由W3C组织和其他标准化组织执行的一系列标准的集合，W3C(万维网联盟)是国际最著名的标准化组织；
使用Web标准的原因：
- 让Web的开发发展前景更广阔；
- 内容能被更广泛的设备访问；
- 更容易被搜寻引擎搜索；
- 降低网站流量费用；
- 使网站更易维护；
- 提高网页的浏览速度；
Web标准的构成：主要包括结构，表现和行为三个方面，如下所示：

image.png

Web标准提出的最佳体验方案：结构，样式，行为三者分离，简单理解就是结构写到HTML文件中，样式写到CSS文件中，行为写到JavaScript文件中；

HTML语法规范

HTML标签是由尖括号包围的关键词，例如；
HTML标签通常是成对出现的，例如和称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签；
有些特殊的标签必须是单标签(极少情况)，例如
，称为单标签；
标签关系有如下：
- 包含关系：相当于父子关系；
- 并列关系：相当于兄弟关系；

html与head是包含关系，head与body是并列关系；

HTML基本结构标签

每一个网页都会有一个基本结构标签(也称为骨架标签)，页面内容也是在这个基本标签上书写；

image.png

新建一个html文件，必须以.html结尾，然后使用浏览打开；

开发工具

开发工具有Sublime Text，VS Code，WebStorm，HBuilder等等，这里我使用的VS Code开发工具，下载官方网址为：https://code.visualstudio.com/
利用VS Code创建一个html文件03_vscode创建页面.html，然后在编辑区域输入! 回车，就会生成默认代码，然后编辑代码，如下所示：




    
    
    
    利用vscode创建的第一个页面


    写代码是一件非常好的事情！！！

安装open in browser插件，如下所示：

image.png
然后在html文件的编辑区域，右击选择Open In Defalut Browser在默认浏览器中显示刚刚编写的html文件；
常用快捷键：针对Mac电脑的；
- command + 加号：代码字号放大；
- command + 减号：代码字号缩小；
- command + N：新建文件；
- command + S：保存文件到指定路径，主要文件格式为html；
- 输入! 按下Tab键：生成html文件的页面骨架结构；
- control + G：定位代码行；
其他插件有如下：
- 中文显示：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- 每次保存，都会自动格式化js，css，html代码：JS-CSS-HTML Formatter
- 自动重命名配对的HTML标签：Auto Rename Tag
- 追踪至样式：CSS Peek
VS Code安装的插件如下所示：

image.png

输入! 按下Tab键，生成html文件的页面骨架结构，下面针对生称的内容进行介绍一下；
：是文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页，此标签的意思是：当前页面采用的是HTML5版本来显示网页；
- 声明位于文档中的最前面的位置，处于标签之前；
- 不是一个html标签，它是文档类型声明标签；
：定义当前文档显示的语言；
- en表示英文；
- zh-CN 表示中文；
- 简单来说定义为en就是英文网页，定义为zh-CN就是中文网页；
：设置字符集用来规定HTML文件使用的字符编码，UTF-8字符集基本包含了全世界所有国家用到的字符；

HTML标签

h标签 -- 标题标签

为了是网页更具有语义化，在网页中使用标题标签，HTML提供了6个等级的网页标题标签，即 -
；
标签语义：作为标题使用，并且依据重要性递减，其特点如下：
- 加了标题的文字会加粗，字号也会依次变大；
- 一个标题独占一行；
注意⚠️：书写标签时，从左往右依次写；





    
    
    
    Document



    标题标签
     燕子1 
     燕子2 
     燕子3 
     燕子4 
     燕子5

p标签 -- 段落标签

标签用于定义段落，它可以将整个网页分为若干个段落；
标签语义：可以将Html文档分割为若干个段落，其特点如下：
- 文本在一个段落中会根据浏览器窗口的大小自动换行；
- 段落和段落之间会有一定的空隙；





    
    
    
    Document



    是在http协议中非常重要的角色。http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。

    NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。

br标签 -- 换行标签

在HTML中,一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，若希望某段文本强制换行显示，就可使用换行标签；
标签语义：强制换行，其特点如下：
- 是一个单标签；
- 标签只是简单的开始新的一行，与段落标签不一样，段落之间会插入一些垂直的间隙；
可以不加反斜杠，即；
在VSCode编辑器中，文本太长，可设置多行显示View->Word Wrap；





    
    
    
    Document



    是在http协议中非常重要的角色。
 http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。

    NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。

文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线效果，这时就需要用到HTML中的文本格式化标签；
标签语义：突出重要性，比普通文字更重要；

image.png





    
    
    
    Document



    我是加粗的文字
    
 我是加粗的文字
    
我是倾斜的文字
    
我是倾斜的文字
    
我是删除线的文字
    
我是删除线的文字
    
我是下划线的文字
    
我是下划线的文字

div与span标签

div与span标签是没有语义的，就是一个盒子，用来装内容的；
标签特点如下：
- div标签用来布局，但是现在一行只能放一个div标签，大盒子；
- span标签用来布局，一行上可以放多个span标签，小盒子；





    
    
    
    Document



    我是一个div标签我一个人单独占据一行
    我是一个div标签我一个人单独占据一行
    百度
    新浪
    搜狐

浏览器显示效果：

image.png

img标签 -- 图像标签

在HTML标签中，img标签用于定义HTML页面中图像；
src是标签的必须属性，它用于指定图像文件的路径和文件名，其属性如下所示：

image.png





    
    
    
    Document



    图像标签的使用:
    

     alt 替换文本 图像显示不出来的时候用文字替换:
    

     title 提示文本 鼠标放到图像上，提示文字:
    

     width 给图像设置宽度:
    

     width height 给图像设置宽高:
    

     border 给图像设置边框:

图片文件必须放在HTML文件所在的文件路径下，与HTML文件平级才会显示出来；
图像标签可以拥有多个属性，必须写在标签名的后面；
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；
属性采用键值对的格式，即key=value；
图像标签的src属性是必须要书写的，属于单标签，后面的反斜杠可以省略；
在实际工作中，我们的文件是不能随便乱放的，否则使用起来会很难快速找到它们，因此我们需要一个文件夹来管理它们；
目录文件夹：就是普通文件夹，里面只不过存放了我们页面所需要的相关素材，比如html文件，图片等等；
根目录：打开目录文件夹的第一层就是根目录；
VSCode可以直接打开目录文件夹，如下所示：

image.png

也可以直接将目录文件夹拖进VSCode，然后自动打开；
如果HTML页面中图片非常多，通常我们会创建一个文件夹来专门存放这些图片文件，那么再来查找图片时，就需要采用路径的方式来指定图片文件的位置；
路径可分为以下两种：
- 相对路径：以引用文件所在位置为参考基础，而建立出的文件路径，简单来说，图片相对于HTML页面的文件路径；

image.png





    
    
    
    Document

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径，例如/Users/liyanyan33/Desktop/前端/180.png；





    
    
    
    Document

a标签 -- 超链接标签

在HTML标签种，a标签用于定义超链接，作用是从一个页面链接到另一个页面，其有两个重要属性如下：

image.png

链接的分类：
- 外部链接：外部网站的链接；
- 内部链接：网站内部页面之间的相互链接，直接链接内部页面的名称即可；
- 空链接：如果没有确定链接目标时，可使用#表示空链接；
- 下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件；
- 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接的；
- 锚点链接：点击链接时，可以快速定位到页面中的目标标签；
- 针对锚点首先在链接文本的href属性中，设置属性值为#名字的形式；
- 然后找到目标标签，里面添加一个id属性 = 刚才设置的名字；





    
    
    
    Document



    1.外部链接
    腾讯
    百度
    2.内部链接
    demo页面
    3.空链接
    公司地址
    4.下载链接
    下载文件
    5.网页元素链接

target="_self"：在当前页面打开网页；
target="blank"：在新的页面打开网页；

注释标签

如果在HTML文档中，添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签；
快捷键为command + /；





    
    
    
    Document

特殊字符标签

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替；

image.png

其中空格，大于，小于这三个字符使用频率最高；
注意以分号结尾；





    
    
    
    Document



    验     证 
 < p >

table标签 -- 表格标签

表格是用来展示数据的；
语法格式：


        
            单元格内的文字

：用于定义表格的标签；
：定义表格中的行，必须嵌套在
标签中；
：定义表格中的单元格，必须嵌套在标签中；
data：data数据就是单元格中数据内容；
：表头单元格，一般位于表格的第一行或第一列，单元格中文本内容加粗居中显示；
表格属性：本身属性不常用，主要是通过CSS来设置；

image.png

排名	关键词	趋势	进入搜索	最近七日	相关链接
1	鬼吹灯	往下	456	123	贴吧图片百度
2	西游记	往下	45346	1223	贴吧图片百度
3	东游记	往下	3456	432	贴吧图片百度
4	西游记后传	往下	45623	113	贴吧图片百度
5	连城诀	往下	5645	768	贴吧图片百度
6	仙剑奇侠传	往下	12	567	贴吧图片百度
7	神雕侠侣	往下	6576	675	贴吧图片百度

显示结果如下：

image.png

表格结构标签

由于表格很长，可将表格分割成表格头部和表格主体两大部分；
：表格头部；
：表格主体；
上述标签都是放于标签中；

排名	关键词	趋势	进入搜索	最近七日	相关链接
1	鬼吹灯	往下	456	123	贴吧图片百度
2	西游记	往下	45346	1223	贴吧图片百度
3	东游记	往下	3456	432	贴吧图片百度
4	西游记后传	往下	45623	113	贴吧图片百度
5	连城诀	往下	5645	768	贴吧图片百度
6	仙剑奇侠传	往下	12	567	贴吧图片百度
7	神雕侠侣	往下	6576	675	贴吧图片百度

合并单元格

将多个单元格合并为一个单元格，简称合并单元格；
目标单元格：写合并代码的单元格；
合并单元格的方式：
- 跨行合并：rowspan = "单元格个数" ，最上侧的单元格为目标单元格；
- 跨列合并：colspan = "单元格个数"，最左侧的单元格为目标单元格；
合并单元格的步骤：
- 首先确定是跨行还是跨列；
- 找到目标单元格，书写合并方式=合并数量；
- 删除多余的单元格；

image.png

ul，ol，dl标签 -- 列表标签

列表标签是用来布局的；
列表分为：无序列表，有序列表，自定义列表；
无序列表：无排列顺序的列表，通过标签来显示；
- ul中只能嵌套li标签；
- li之间相当于一个容器，可以容纳所有元素；





    
    
    
    Document




    你喜欢的食物
    
        榴莲
        臭豆腐
        鲫鱼

显示如下：

image.png

有序列表：有排列顺序的列表，通过标签来显示；
- ol中只能嵌套li标签；
- li之间相当于一个容器，可以容纳所有元素；





    
    
    
    Document




    你喜欢的食物
    
        榴莲
        臭豆腐
        鲫鱼

显示如下：

image.png

自定义列表：通过标签来显示；
- 只会包含与标签；
- 表示头部名称，表示内容；
- 与可包含任何标签；





    
    
    
    Document




    你喜欢的食物
    
        关注我们
        新浪微博
        微信
        联系我们

form标签 -- 表单标签

使用表单，可收集用户信息；
表单的组成部分：
- 表单域：包含表单元素的区域，使用标签表示，可将收集的信息提交到服务端；
- 表单控件：也叫表单元素；
- 提示信息；

image.png

表单控件 -- `input表单元素`

-input表单元素，有个type属性，其取值有如下类型：

属于单标签；

image.png

其他属性如下所示：

![image](https://upload-images.jianshu.io/upload_images/25440976-2946d6a2f4a992d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

当type值为radio时：属于单选按钮，name属性值必须一致，才能实现单选的效果；
当type值为checkbox时：属于多选按钮；
name域value属性值，主要是给后台开发人员使用的；





    
    
    
    Document




    
        用户名:
         
 密码:
        
 性别:男
         性别:女
        
爱好:吃饭
        睡觉
        打游戏
         

        

        

        
 上传头像:

显示效果如下：

image.png

label标签

用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验；

label标签的for属性与相关元素的id属性相同；

表单控件之下拉表单

若存在多个选项，且节约页面空间时，可以使用下拉表单；
中至少包含一个
可通过





    
    
    
    Document




    
        籍贯:

表单控件之文本域元素`textarea`

可输入多行文本；
属性cols：表示每行字符数；
属性rows：表示显示行数；





    
    
    
    Document




    
        今日反馈:
        干你妹

案例实现





    
    
    
    Document




    青春常在 青春美好
    
        
        
            性别:
            
                男
                女
            
        
        
        
            生日:
            
                
                
                
            
        
        
        
            所在地区
            
                
            
        
        
        
            婚姻状况
            
                未婚
                已婚
                离婚
            
        
        
        
            学历
            
                
            
        
        
        
            喜欢的类型
            
                妩媚的
                可爱的
                丰满的
                苗条的
                荡货的
            
        
        
        
            个人介绍
            
                自我介绍
            
        
        
        
            
            
                
            
        
        
        
            
            
                我同意注册条款和会员加入标准
            
        
        
        
            
            
                我是会员，立即登录
        
        
        
            
            
                我承诺
                
                    年满18岁，单身
                    态度严肃
                    活力四射

显示效果如下：

image.png

学会文档的查阅；
- W3school
- MDN

性别:	男女
生日:
所在地区
婚姻状况	未婚已婚离婚
学历
喜欢的类型	妩媚的可爱的丰满的苗条的荡货的
个人介绍	自我介绍

	我同意注册条款和会员加入标准
	我是会员，立即登录
	我承诺年满18岁，单身态度严肃活力四射

前端入门01 -- 前言，HTML，HTML标签

网页

HTML

浏览器

Web标准

HTML语法规范

HTML基本结构标签

开发工具

HTML标签

h标签 -- 标题标签

-

；

标题标签

燕子1

燕子2

燕子3

燕子4

燕子5

p标签 -- 段落标签

br标签 -- 换行标签

文本格式化标签

div与span标签

img标签 -- 图像标签

图像标签的使用:

alt 替换文本 图像显示不出来的时候用文字替换:

title 提示文本 鼠标放到图像上，提示文字:

width 给图像设置宽度:

width height 给图像设置宽高:

border 给图像设置边框:

a标签 -- 超链接标签

1.外部链接

2.内部链接

3.空链接

4.下载链接

5.网页元素链接

注释标签

特殊字符标签

table标签 -- 表格标签

表格结构标签

合并单元格

ul，ol，dl标签 -- 列表标签

你喜欢的食物

你喜欢的食物

你喜欢的食物

form标签 -- 表单标签

表单控件 -- input表单元素

label标签

表单控件之下拉表单

表单控件之文本域元素textarea

案例实现

青春常在 青春美好

我承诺

你可能感兴趣的:(前端入门01 -- 前言，HTML，HTML标签)

alt 替换文本图像显示不出来的时候用文字替换:

title 提示文本鼠标放到图像上，提示文字:

表单控件 -- `input表单元素`

表单控件之文本域元素`textarea`

青春常在青春美好