HTML基础知识

、HTML基本信息

注释：

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

title：网页标题
meta：描述性标签，描述网站的信息，用来做SEO

charset = "UTF-8"
name = "keyword" content = ""关键词
name = "descrisption" content = ""描述

body：代表网页主题

二、网页基本标签

标题标签

<h1>一级标签</h1>一直到6级标签

段落标签

<p>段落标签</p>

换行标签

<br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释

特殊字符

空格 ---->一个空格
大于号 >
小于号<
版权符号©

特殊符号就是 & xxx ;

三、图像标签

src 图像地址必填
alt 图像的代替文字(找不到图片的时候显示) 必填
title 鼠标悬停提示文字
width 图像的宽度
height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径，要跳转带那个位置必填
target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

从一个页面链接到另一个页面

锚链接

第一步需要一个标记使用name做标记
第二步跳转到标记使用#标记
<a name="top" ></a>
<a href="#top"></a>
上面是页面内的跳转

<a name="down"></a>
<a href="第一个页面的path#down"></a>
页面间的跳转

功能性链接

邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度、左右都是行内元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

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

无序列表

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

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

video
<video src="path" controls autoplay></video>
src:资源路径
controls控制条
autoplay自动播放

音频元素

audio
<audio src="" controls autoplay></audio>

九、页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
atricle	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

十、iframe内联框架

src必填
width
heigth
name标记
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 规定如何发送表单数据常用psot、get
action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text
name	指定表单元素的名称必填，用来后台读取
value	元素的初试值。type为radio时必须指定一个值
size	指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为txet或password时，输入的最大字符数
cheaked	type为radio或cheackbox时，指定按钮是否被选中

单选框

input type="radio"
value 单选框的值
name ：表示组，name一样一次只能选一个，name不一样可以选多个
checked默认选中的

多选框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默认选中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

placeholder="提示信息" 在输入框上

非空判断

required

正则表达式验证

pattern
<input type="text" name="mail" pattern="正则表达式">

高级验证使用js

SS网格布局是一组相交的水平线和垂直线，它定义了网格的行和列（可以理解为表格）。我们可以将网格元素放置在与这些列和行相关的位置上，是二维的布局系统，可以用在布局页面主要区域或小型用户界面元素；

特点:

固定的位置和弹性的轨道的大小
可以根据行号、行名或者标定一个网格区域来摆放网格项
创建额外的轨道来包含内容
控制项目对齐
控制重叠内容

这篇内容主要探讨其中一个特点：可以根据行号、行名或者标定一个网格区域来摆放网格项；

网格轨道（grid track）是网格上任意两条相邻线之间的空间。下图显示了一个突出显示的轨道——这是网格中第一行的轨道。

当我们定义网格时，我们先定义的是网格轨道，而不是网格线；网格布局会为我们创建编号的网格线来让我们来摆放每一个网格元素。

* {
            box-sizing: border-box;
        }

        .wrapper {
            border: 2px solid #f76707;
            border-radius: 5px;
            background-color: #fff4e6;
        }

        .wrapper>div {
            border: 2px solid #ffa94d;
            border-radius: 5px;
            background-color: #ffd8a8;
            padding: 1em;
            color: #d9480f;
        }

        .wrapper {
            display: grid;

            /* 3列轨道  列宽自动计算*/
            grid-template-columns: repeat(3, 1fr);

            /* 3行轨道  行高100px*/
            grid-template-rows: repeat(3, 100px);
        }

 <div class="wrapper">
        <div class="box1">One</div>
        <div class="box2">Two</div>
        <div class="box3">Three</div>
        <div class="box4">Four</div>
    </div>

如下图三列三行的网格，行从上往下：线号1、2、3、4，从下往上：-1、-2、-3、-4；列从左往右：1、2、3、4，从右往左:-1、-2、-3、-4

理解了网格的线，那么怎么基于线来控制元素在网格的位置？

线编号来布局元素

例如控制One元素，想要最左开始占一个列轨道，占3条行轨道

.box1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
}

One元素，最左开始，占第一列轨道grid-column-start: 1;grid-column-end: 2;，grid-row-start从第1行线号开始，延伸至第4行号结束grid-row-end;Four元素就会自动在行轨道下一个空的单元格，对其他3个元素同样进行控制摆放：

.box1 {
  <*列1号线开始,2号线结束，行1号线开始，4号线结束*>
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  <*列3号线开始,4号线结束，行1号线开始，3号线结束*>
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  <*列2号线开始,3号线结束，行1号线开始，2号线结束*>
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  <*列2号线开始,4号线结束，行3号线开始，4号线结束*>
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

4个元素都各自有设置线编号来实现位置摆放，网格布局的一个优势是：无需给元素周围加上 margin 来阻止文档流自动填补空白，就能实现设计中的留白区域；
grid-column-start,grid-column-end,grid-row-start,grid-row-end CSS代码太多了，还可以简写为 grid-column 和 grid-row，

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

如果元素只延伸一个轨道的话，可以省略grid-column-end、grid-row-start,只写grid-column、grid-row，元素默认延伸一个轨道

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

属性名和值的简写如下:

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

元素摆放效果是一样的：

有没有再进一步简写，来实现相同的元素摆放呢？还可以只定义一个属性grid-area；

grid-area属性

使用这个属性前，先看看写法：

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}

怎么理解这个One元素grid-area值呢？顺序看起来有点奇怪，联想对比padding值，元素的上、有、下、左，先看看grid-area值的顺序分别代表啥意思

grid-area: 行起始(inline-start)/ 块起始(block-start)/ 行结束(inline-end)/ 块结束(block-end)

One元素列1号线开始,2号线结束，行1号线开始，4号线结束。值的顺序和padding值不一样，因为与CSS书写模式规范中的书写方向有关系。书写流关联的4个方向：

块起始（block-start）
块结束（block-end）
行起始（inline-start）
行结束（inline-end）网页的英文书写是从左至右，从上至下，

当使用grid-area属性定义网格时，结合书写流方向理解，值的顺序就清晰了；

grid-area: grid-row-start / grid-column-start / grid-row-end/ grid-column-end

同样可以简写：

.box1 {
  grid-area: 1 / 1 / 4;
}

反方向记数

也可以从行和块结束线开始反方向计数

.box1 {
  grid-area: -1 / -1 / -4;
}

使元素跨越整条轨道.如果一个元素是占据一行的，拥有从开始计数和从末尾计数这两种定位方法使得使一个元素跨越整个网格变得很方便，例如Four元素

.box4 {
 grid-column: 1 / -1;
}

间距

间距只出现在网格轨道与轨道之间，它们并不会出现在网格容器的四周。给网格容器添加行间距row-gap

.wrapper {
  ...
  row-gap: 1em;
}

.wrapper {
  ...
  row-gap: 1em;
  column-gap: 1px;
}

行间距row-gap，列间距column-gap:

简写：

.wrapper {
  ...
  gap: 1em / 1px;
}

从基于线定位的角度来说，间距的行为就像是使基线变得特别宽。

关键字span

除了”起始线与结束线“的定位方法，你还可以使用”起始线与跨越轨道数量“的定位方法,

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

One元素grid-row: 1 / span 3;理解为从第1号行线开始，跨越3条行轨道，截止在第4号行线；
Two元素grid-row: 1 / span 2;理解为从第1号行线开始，跨2条行轨道，截止在第3号行线；
Four元素grid-column: 2 / span 2;理解为从第1号列线开始，跨2条列轨道，截止在第4号列线；

从确定的线编号开始，跨越指定数量的行轨道；

例1
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3;
}

例2
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}

例1、例2 两个都是会创建相同的网格，One元素在1列轨道，占3条行轨道；
例1:元素就会从 1 号线开始，跨越 3 条线，到 4 号线结束
例2:元素会从指定的线往上跨越 3 条线;

例3
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: span 3;
}

例3:与例2 相同的行为;
当开始和结束都使用了关键字时，只有grid-row-start起效；

例4
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: span 2;
}

例4

例5
.box1 {
  grid-column-start: 1;
  grid-row-start: span 2;
  grid-row-end: span 3;
}

例6
.box1 {
  grid-column-start: 1;
  grid-row-start: span 1;
  grid-row-end: span 3;
}

例6

总结

认识网格基于线来摆放元素的使用，属性grid-column、grid-row的写法，以及元素根据行号，多种方式实现跨行跨列的布局；

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

在线咨询

上一篇：HTML5特效库 HTML5+JS全屏星空特效源码
下一篇：大屏数据展示模板（HTML）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础知识

、HTML基本信息

二、网页基本标签

三、图像标签

四、链接标签

五、行内元素和块元素

六、列表

七、表格

八、视频和音频

九、页面结构分析

十、iframe内联框架

十一、表单

十二、表单的应用

十三、表单初级验证

线编号来布局元素

grid-area属性

反方向记数

间距

关键字span

总结

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

您的项目需求