码农界的夏侯惇

重走前端入门路（一）——HTML（1）

HTML概述
前端开发概述
前端开发也叫web前端开发，它指的是基于web的互联网产品的页面(界面)开发以及功能开发。
互联网产品是指网站为满足用户需求而创建的用于运营的功能及服务。
前端开发需要的技术包括：photoshop，html，css，javascript，js库和框架。

html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

不同工具打开html文件产生不同结果：
编辑器打开会是一段代码，浏览器打开会是一个网页，这是因为编辑器不认识这些html标签，而浏览器知道这是html文件后，会对html文件里面的标签进行渲染，从而渲染出一个网页；

xhtml 1.0和html5
xhtml 1.0

是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab

html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的;
h5对XHTML1.0进行了精简，主要是在文档声明，html标签和meta标签中，原来有W3C的广告；
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
区别：
1.文档声明和编码声明；
2.html5新增了标签元素和元素属性；

html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

html注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

html基本结构
一个html的基本结构如下：

写html必须先声明，如果不声明的话，会默认以最低版本的文档模式进行渲染，从而导致很多地方不兼容；
以开头，结尾；

HTML标签分类
html标题标签
通过

、

标签可以在网页上定义6种级别的标题。
6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题（最重要的），其后是

（次重要的），再其次是

，以此类推。
搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的，有助于搜索引擎优化。
标题标签示例：

这是一级标题

这是二级标题

这是三级标题

html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，

代码如下：




    
    段落


    ip和端口
    IP地址是什么：比如192.168.1.1 这样的一些数字；
    ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
    

    知名端口：
    固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
    小于1024的，大部分都是知名端口；
    范围从0~1023；

html换行标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行。

换行示例：

IP地址是什么：比如192.168.1.1 这样的一些数字；
ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。


IP地址是什么：比如192.168.1.1 这样的一些数字；
ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。

html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体；
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体：
空格的字符实体：
“<” 和 “>” 的字符实体为 < 和 >
注意：一两个空格之类的少量空格我们可以使用来进行空格，但大量的空格，我们需要使用后面学的样式来进行调整；

html标签特点
html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：


......
......
......
......









    ...
    ...


      ...
      
              ...
              ...

语义标签
html块标签
html块标签

div标签–块元素，表示一块内容，没有具体的语义。
span标签–行内元素，表示一行中的一小段内容，没有具体的语义。
div标签内部可以嵌套其他标签，比如嵌套标题标签，p标签，以及div标签等等；
其他有的标签页可以嵌套，但一般嵌套用div比较多；
p标签内部不建议(不能)嵌套p标签，但能嵌套span标签，目前即使嵌套了span标签页没什么变化，学到样式时就可以给span包裹的文字添加样式了。
一个div标签和一个p标签，里面放一样的内容，显示出来并没有区别；但如果将三个div标签和三个p标签分别放在一起，就会发现，三个p标签每段文字都会空一行，而div的每段会挨在一起，这是因为div标签本身不带样式，而p标签带样式；


    
    
        
        段落
    
    
        ip和端口
        IP地址是什么：比如192.168.1.1 这样的一些数字；
        ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
        
        
        知名端口：
        固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
        小于1024的，大部分都是知名端口；
        范围从0~1023；

        IP地址是什么：比如192.168.1.1 这样的一些数字；
        ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
        
        
        知名端口：
        固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
        小于1024的，大部分都是知名端口；
        范围从0~1023；

含样式和语义的标签
em标签行内元素，表示语气中的强调词斜体；
i标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇斜体；
b标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名加粗；
strong标签行内元素，表示非常重要的内容加粗。
实际开发中其实随便用，可能面试的时候会问它们之间的区别；
使用时直接将标签包裹住文字即可，注意是双标签；

仅举例i标签：

知名端口：固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；小于1024的，大部分都是知名端口；范围从0~1023；

语义化的标签
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录，语义化的标签不多。
比如：

h1标签是表示标题，
p标签是表示段落，
ul、ol标签是表示有序无序列表，
a标签表示链接，
dl、dt、dd表示定义列表等。

html图像标签
html图像
标签可以在网页上插入一张图片，它是独立使用的标签；
通过“src”属性定义图片的地址；
通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表css，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题，所以在开发时建议使用相对路径。
相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg”，表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签
标签可以在网页上定义一个链接地址;
通过href属性定义跳转的地址，
通过title属性定义鼠标悬停时弹出的提示文字框。
通过target属性定义链接打开时窗口的位置；target="_self"覆盖原有网页，在原来的位置打开；target="_blank"新开一个标签打开网页。
a标签示例：

 
百度一下，你就知道

    

测试页面2

定义页面内滚动跳转(设置锚点)
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

设置锚点语法：

标题1

...... ...... 跳转到标题一锚点示例： ``` 锚点示例

锚点示例-页面内跳转

标题1

标题2

标题3

这里是内容

跳转标题1
跳转标题2
跳转标题3

锚点示例

列表标签
html中，列表分为：有序列表，无序列表，定义列表；  
实际开发中一般用无序列表，而很少用有序列表。

无序列表(unordered list)

无序列表

``` 在网页生成的列表上，每条项目上会有或圆或方的小图标；在以后的开发中，会将小图标去掉，自定义样式；参数及作用：

也可以在列表中添加a链接



    新闻标题
    新闻标题
    新闻标题

有序列表(ordered list)

有序列表

    aaa
    bbb
    ccc



    aaa
    bbb
    ccc

在网页生成的列表上，每条项目上会按1,2,3编号；

参数及作用：

定义列表(definition list)



  标题1
  内容1
  
  标题2
  内容1
  内容2

显示效果为：

标题1
　　内容1
标题2
　　内容1
　　内容2

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

重走前端入门路（一）——HTML（1）

、

、

、

、

、

标签可以在网页上定义6种级别的标题。 6种级别的标题表示文档的6级目录层级关系，比如说：