HTML发展史与部分标签

HTML

前端的发展

网页开发（pc），web开发（网站开发 网页+后端+数据库），移动端开发（微信公众号、小程序），接口开发（安卓、ios、第三方）

1991年，出现了第一个网页，早期网页，大学、政府、学术研究和报告

1994年，第一代动态编程易操作的语言（PHP）51job，动态网站的先驱

1995年，JavaScript为了实现网页的动画和交互

98-99年，Ajax（异步技术）像百度地图一直在刷新位置，Java出现

2007年，第一步iPhone的诞生

2014年，HTML5版本发布

2020年，Vue3.0

前端基础学习是主要的三部分：

HTML：网页的骨架

CSS：内容的样式、美化

JavaScript：用户交互动作

HTML

• 超文本：通过一系列的超链接，将不同的空间资源连接在一起形成一个网状结构的内容展示，超文本其实可以理解为一种媒体，不仅仅是图片、视频、音频等

• 标记：即一种标签，是一个符合w3c规定的一种标记要求各式标签，ml，标记语言是由尖括号<>组成

HTML特点

• 简单性：没有复杂的逻辑结构，只要学会标签的使用就可以构建网页

• 可扩展性，html标签每种标签可以有不同的用途

• 跨平台性：网页允许的环境是浏览器，只有系统中有浏览器才能访问

• 通用性：网页写好后，可以相互嵌套和跨平台

网页的文档结构

• 浏览器

Chrome必须装，有v8引擎

Firefox/360极速浏览器：选装

QQ浏览器、搜狗浏览器等可以不装

IE（忽略浏览器）

网页结构

说明：网页需要一个html标签来作为跟标签（父标签），再开始喝结束中间可以放入其他标签

head 标签是放置网页

body是放置网页内容

标题标签

• h1：logo或网页整体名称

• h2：板块或者具体的专栏文字描述，如果只有一个板块就是主内容标题

• h3：副标题

• h4~h6不经常用

段落标签

“<p>”是开始和结束标签 </p>

特殊符号

&nbsp；->空格
<->小于号
>->大于号

书上p43页所有特殊符号

图片

<img>

src：图片来源，可以是在线图片

alt：图片的提示文本，当图片没有加载（显示）会有提示文本

相对路径读取：从自身页面出发寻找图片,可以省略./

<img src="./oo1.jpg">

绝对路径：就是从盘（D:/...）开始

../就是上级路径，可以再上层路径里边找指定的目录或图片

图片的宽高

注意：

• 如果设置了完整的宽高，在没有决定测量好图片原始尺寸情况下，图片会变形，解决方案为只设置一边像素，另一边会自动的等比例缩小

• 网站的图片根据需求设置大小，不要大图缩小显示，会影响网站加载速度

过时标签

有些标签已经被列为不再使用标签，会在后期的解析过程中被替换或失效

<font>

color颜色设置：

1. 颜色单词：red green

2. 十六进制色：#+6为十六进制

补充说明

进制：二进制、八进制、十进制、十六进制

二进制：1+1=10、十进制：9+1=10

十六进制：0123456789abcdef

center居中

过期原因：过期是html的功能和css进行分离，不在混合书写，这样才导致过期

超链接

<a>标签是跳转标签，它自带样式

01.外网跳转

也可以让图片变成链接

 显示效果，鼠标移入会变成手状态，单击后会进行跳转

02.本网跳转

<a href="bioage.html">跳转表格页面</a>

就是在当前网站中在不同的页面进行跳转

target属性

target是超链接打开方式

_blank新开一个网页，当前浏览器网页不关闭

_self覆盖在原网页上打开

列表

网页分为两种类型：有序列表和无序列表

有序列表

<ol>
    <li></li>
    <li></li>
<ol>

无序列表

<ul>
    <li></li>
    <li></li>
<ul>

注意：有序列表的嵌套（默认）使用还是123

无序列表嵌套第二层是白色小点

• 无论有序还是无序都会有一定的间距

• 每个li标签都是独占一行（默认）

• 可以再每个li标签内进行嵌套

自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1的解释1</dd>
    <dd>名词1的解释2</dd>
</dl>

说明：

dl：一条信息，一条记录

dt；内，可以使图片和文字

dd：对内容和描述

作用

1. 给到一些特殊浏览器识别（盲人浏览器、阅读浏览器）

2. 更好的让搜索引擎识别

表格

表格：以规范的行和列的形式展示数据，可以在表格里放入任何内容（文本、图片、超链接、列表 ）

<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

table表格的主标签，又开始有结束的标签，可以设置一个边框属性（现在过时了）

tr行标签，一个开始一个结束

td列标签（单元格标签），一个td就代表一个表格内容区域

注意：

不能在td中形成不统一的数量，这样会在每行上看到缺失的格式

表格的属性

• table代表表格，一个table标签就是一个表格

• border：设置边框(已过时)
• height：高度
• width：宽度
• cellspacing：单元格的间距
• cellpadding：单元格边框与内容之间的距离
• align：设置表格在页面中的对齐方式，left/center/right(已过时)
• bgcolor：设置表格的背景色(已过时)

• tr：代表行，一个tr就是一行

  • height：设置行高
  • algin：设置整行的单元格内内容的对齐模式 left/center/rihgt
  • bgcolor:设置整行的颜色
• td：代表列，一个单元格（数据格）
  • width：设置当前单元格的宽度，会影响整列的宽度
  • height：设置当前单元格的高度，会影响整行的高度
  • algin：设置当前单元格的内容对齐方式
  • bgcolor：设置当前单元格的颜色

合并单元格

合并单元格是可以有两种方式：

• rowspan：跨行合并，垂直方向的合并
• colspan：跨列合并，水平方向的合并

<table border="2" width="600px" align="center" cellspacing="1" cellpadding="1" bgcolor="#ddd">
        <tr>
            <td colspan="3" align="center">列表汇总</td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td><strong>电视剧名称</strong></td>
            <td><strong>电视剧排行</strong></td>
            <td><strong>电视剧收视率</strong></td>
        </tr>
        <tr>
            <td>猫和老鼠</td>
            <td rowspan="2">1</td>
            <td>4.5%</td>
        </tr>
        <tr>
            <td>西游记</td>
            <!-- <td>1</td> -->
            <td>4.5%</td>
        </tr>
    </table>

注意：表格的合并其实就是表格td的操作。需要准确的给出合并数值