前端HTML基础

前端HTML基础
1.0开发工具介绍

sublime的使用技巧链接

HTML特殊符号表

1.1 html概念

　　超文本标记语言（Hypertext Markup Language），属于一种描述性的标记语言（markup language），通过标签来标记要显示的网页的各个部分

　　它没有编译过程，不属于编译语言，HTML页面直接由浏览器解析执行。HTML中除了语义，其他什么都没有，属于负责描述文档语义的语言

　　浏览器按照顺序渲染网页文件，然后根据标记符解释和显示内容。但是由于存在兼容性问题，不同浏览器对同一标签解释可能存在不同

　　超文本：音频，视频，图片被称为超文本

　　HTML作用：给文本增加主标题的语义

1.2 HTML网络术语

网页：由各种标记组成的一个页面就叫做网页

主页（首页）:一个网站的起始页面或者导航页面

标记：<p>称为开始标记，</p>称为结束标记，也叫做标签，每个标签都有其规定的特殊含义

元素：<p>内容</p>整体称为元素

属性：给每一个标签所做的辅助信息

1.3 html结构及标签格式

基本结构：

1.4 HTML书写规范

　　所有标记元素的嵌套不能交叉，正确格式：<h1><font></font></h1>

　　标签通常都是成对出现的（双边标记），比如<div>和</div>，两个标签之间的部分称为标签体

　　标签的字母不分大小写，但是推荐使用小写　

　　标签可以有若干个属性，也可以不带属性，如<head>元素就不带任何属性

　　所有的属性值必须加引号，如<h1 id="head"></h1>

　　且所有的属性必须有值，如<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

　　HTML对换行和tab都不敏感，它们不影响页面结构，但是良好的缩进容易使代码更易读

1.5 HTML常用标签

见图：

<!DOCTYPE html>

　　文档声明头，位于文档最前端，以此告知浏览器文档使用哪种HTML或XHTML规范（XHTML，是一种更加严格纯净的HTML，对格式要求更加严格）

<html lang="zh-cn">

　　语言文字标签，zh是中文，代表的是宏语言，zh-cn表示的是中国大陆中文，英文书写<html lang="en">，目前已经出现了新标准，但是为了兼容性一般都是再用这种，详见链接

<head>头标签

　　放在头部分之间，里面包含了：<title>、<meta>、<link>，<style>

　　<title>：指定整个网页的标题，在最上方显示

　　　　它是用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
```
 <title>路飞学城</title>
```
　　 <meta>：提供有关页面的基本信息，针对搜索引擎和更新频率的描述和关键词

　　它总共有两个属性，分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值实现了不同的网页功能。

　　　　http-equiv属性：用来向浏览器传达一些有用信息，帮助浏览器正确显示网页内容，对应的属性值为content，其实就是各个参数的变量值
```

<meta http-equiv="refresh" content="2;url=http://www.baidu.com"> 
 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
<meta http-equiv="x-ua-compatible" content="IE=edge">
```
　　　　name属性：用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
```
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
```
这些关键字，是来告诉搜索引擎这个网页是干嘛的，能够提高搜索命中率

　　<link>：定义文档与外部资源的关系

　　<style>:定义内部样式表与网页的关系

<body>标签

常用标签：
```
'''
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 在文字上加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:添加一条水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''
```
　　字体标签：包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

　　<h1>至<h6>标签进行定义，<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

　　居中效果：

　　<font>

　　color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 #ff00cc rgb(0,0,255)

　　size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，

　　那就只能通过css样式来解决

　　face="微软雅黑"：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。

　　效果：

　　<b>或<strong>字体加粗

　　效果展示（注意不带换行）

　　下滑标记<u>和中滑标记<s>

　　效果：

　　斜体标记<em>或<i>

　　效果：

　

　　上标<sup> 下标<sub>

　　效果：

　　预定义标签<pre>: （基本用不上）

　　保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果,是什么样就输出什么样

　　这里还需记住几个特殊字符：
-   空格（non-breaking spacing，不断打空格）
- < 小于号（less than）
- >　　大于号（greater than）
- & 符号&
- " 双引号
- ' 单引号
- &copyright; 版权©
- ™ 商标™
- 其他特殊字符链接地址
　　转义字符：如下（其实就是添加了大于号小于号括起来了）

　　排版标签

　　包括段落标签<p>，英文paragraph的缩写。具有align='属性值'：对齐方式。属性值包括：left、center、right

　　p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

　　HTML标签分为两种：
- 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
- 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
　　块级标签<div>和<span>

　　align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

例：
```
<body>

    <div>
        导航栏
    </div>
    <div>
        中心banner
    </div>
    <span>路飞</span>
    <span>zoro</span>
    
</body>
```
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span举例
```
<p>
        商品简介:
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
</p>
```
div格式
```
<div class="header">
    <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
<div class="footer"></div>
```
　　div标签负责布局，结构，分块，css负责样式

　　超链接标签

　　1.外部链接：连接到外部文件
```
<a href="new.html">点击进入到新网页</a>
```
　　a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

实现方式;
```
 <a href="http://www.baidu.com" target="_blank">进入百度</a>
```
　　2.锚链接：给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。

　　首先要创建一个锚点，即使用name属性或者id属性给那个特定位置起个名字

　　3.邮箱链接
```
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
```
　　几个特殊链接

　　跳转回页面顶部：（这个不用设置锚点，方便多了）
```
 <a href="#">跳转到顶部</a>
```
　　与js有关：
```
 <a href="javascript:alert(1)">内容</a>
  <a href="javascript:;">内容</a>
```
1. javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</2
2. javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<ahref="javascript:alert()">内容</a>
　　超链接属性：
- href：目标URL
- title：悬停文本。
- name：主要用于设置一个锚点的名称。
- target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
  - _self：在同一个网页中显示（默认值）
  - _blank：在新的窗口中打开。
  - _parent：在父窗口中显示
  - _top：在顶级窗口中显示
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

　　图片标签<img>

　　属于单标签（自封闭标签）

　　1.写法：相对路径
```

<img src="2.jpg">
<img src=".2.jpg"> 

<img src="..2.jpg">
```
　　img 是image“图片”的简写，src 是英语source“资源”的缩写。

　　2.写法：绝对路径

　　（1）以电脑盘为代表：
```
<img src="C:UsersaaaDesktophtml-01images1.jpg">
```
　　（2）网络路径
```
<img src="http://www.baidu.com/2016040102.jpg">
```
　　img标签常用属性：
```
width：宽度
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
```
相关阅读:
助教小结4
第二次作业
 助教小结5
助教小结3
work3
助教小结1
课后第一次作业
 助教小结2
第一次团队作业
 悟透 JavaScript
原文地址：https://www.cnblogs.com/LearningOnline/p/9064199.html

1.0开发工具介绍

1.1 html概念

1.2 HTML网络术语

1.3 html结构及标签格式

1.4 HTML书写规范

1.5 HTML常用标签

<!DOCTYPE html>

<html lang="zh-cn">

<head>头标签