文章目录

1、什么是HTML
2、HTML 的基本模板
3、常用标签
- 3.1 块级标签代码
- 3.2 什么是描点
- 3.3 列表标签
- - 3.3.1 无序列表
  - 3.3.2 有序列表
  - 3.3.3 定义列表
- 3.4 表格标签
- - 3.4.1 表格标签格式:
  - 3.4.2 表格标签的属性:
  - 3.4.3 表格的合并
- 3.5 表单标签
- 3.5.1 表单标签input的属性
- 3.5.2 label标签
- 3.5.3 datalist标签
- 3.6 表单非input标签
- - 3.6.1 select标签
  - 3.6.2 textarea标签
- 3.7 单选框
- 3.8 多选框
- - 3.8.1 input 标签
  - 3.8.2 submit 和reset
- 3.9 提交服务器要注意几点
4、其他基础知识
- 4.1 块级元素
- 4.2 行内（内联）元素
- 4.3 行内块元素
- 4.4 隐藏元素
- 4.5 多媒体标签
5、HTML书写规范

1、什么是HTML

超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

超文本标记语言（HyperText Markup Language），简称 HTML

2、HTML 的基本模板

3、常用标签

3.1 块级标签代码

h1 ~ h6 的标题标签

div 块状标签, hr 分割线，br 换行

<div>hello html <hr> hello css <br> hello javascript
</div>

3.2 什么是描点

要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

如果和HTML中的标签绑定一个独一无二的身份证号码呢?

在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的。

所以要想实现通过a标签跳转到指定的位置分为两步

给目标位置的标签添加一个id属性, 然后指定一个独一无二的值

告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

格式:：

<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

3.3 列表标签

3.3.1 无序列表

无序列表格式:

<ul><li>需要显示的条目内容</li>
</ul>

有序列表(最少)(ordered list)

3.3.2 有序列表

有序列表格式:

<ol><li>需要显示的条目内容</li>
</ol>

3.3.3 定义列表

定义列表的格式

<dl><dt>是用来定义列表中的标题</dt><dd>含义就是用来定义标题对应的描述的</dd>
</dl>

3.4 表格标签

3.4.1 表格标签格式:

<table border="1"><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

3.4.2 表格标签的属性:

<!--编写一个2行2列的表格-->
<table border="1" width="500px" height="300px" align="right" cellspacing="12px" cellpadding="1"><tr valign="bottom"><td width="150px" height="50px">1.1</td><td valign="top">1.2</td></tr><tr align="center"><td align="right">2.1</td><td>2.2</td></tr>
</table>

3.4.3 表格的合并

水平方向上的单元格合并可以给td标签添加一个colspan属性

例如:<td colspan="2"></td>

含义: 把当前单元格当做两个单元格来看待

垂直方向上的单元格合并

可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)

例如:<td rowspan="2"></td>

<table bgcolor="black" width="500px" height="300px" align="center"><tr bgcolor="white"><td rowspan="2" colspan="2">></td><!--<td></td>--><td></td></tr><tr bgcolor="white"><!--<td></td>--> <td></td><td></td></tr><tr bgcolor="white"><td></td><td></td><td></td></tr>
</table>

3.5 表单标签

<form><!--明文输入框-->账号:<input type="text"><br><!--暗文输入框-->密码:<input type="password"><br><!--给输入框设置默认值-->账号:<input type="text" value="lnj"><br>密码:<input type="password" value="123"><br>
</form>

3.5.1 表单标签input的属性

<form><!--可以自动校验输入的内容是否符合邮箱的格式-->邮箱:<input type="email"><br><!--可以自动校验输入的内容是否是URL地址-->域名:<input type="url"><br><!--输入框中只能输入数字-->电话:<input type="number"><br><!--可以通过日历来选择时间-->时间:<input type="date"><br><!--可以通过取色板来选择颜色-->颜色: <input type="color"><br><input type="submit">
</form>

3.5.2 label标签

要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

1. 将文字利用label标签包裹起来
2. 给输入框添加一个id属性
3. 在label标签中通过for属性和输入框中的id进行绑定即可

<label for="account">账号:</label><input type="text" id="account">

3.5.3 datalist标签

作用: 给输入框绑定待选项
1. 搞一个输入框
2. 搞一个datalist列表
3. 给datalist列表标签添加一个id
4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
请输入你的车型: <input type="text" list="cars"> <datalist id="cars"> <option>奔驰</option> <option>宝马</option> <option>奥迪</option> <option>路虎</option> <option>宾利</option> </datalist>

3.6 表单非input标签

3.6.1 select标签

作用: 用于定义下拉列表

一级下拉列表
<select><option>北京</option><option>上海</option><option>广州</option><option>广西</option》<option selected="selected">武汉</option>
<</select>
二级下拉列表
<select><optgroup label="北京"><option>朝阳区</option><option>昌平区</option><option>通州区</option></optgroup><optgroup label="广州"><option>天河区</option><option>越秀区</option><option>黄浦区</option></optgroup>
</select>

3.6.2 textarea标签

作用: 定义一个多行输入框
格式: 25行一行5个 <p> 个人简介: <textarea cols="25" rows="5"></textarea> </p>

3.7 单选框

input 标签 radio 必须有相同的name ，checked = checked 默认选上

<p>性别:<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<input type="radio" name="gender" checked="checked" value="yao">保密
</p>

3.8 多选框

3.8.1 input 标签

input 标签 checkbox 必须要相同的name

    <p>爱好:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" checked="checked" value="crazy">足浴</p>

3.8.2 submit 和reset

submit 和reset

    <p><input type="submit" value="注册"><input type="reset" value="清空"></p>

3.9 提交服务器要注意几点

在单选框和多选框中,所有的项目的name必须一致，在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据，也就是必须有name和value属性提交时url 会有 name的值 = value的值

其他input标签如text，password，必须要name ，提交时会name的值 = 填写的值

4、其他基础知识

4.1 块级元素

div display:block;
可以包含任何块和行内元素
独占一行，支持设置宽高
如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0

4.2 行内（内联）元素

span display:inline;
可以和其他行内元素位于同一行
行内元素不要包块级元素
不支持设置宽高
内容撑开宽高

4.3 行内块元素

display:inline-block;
块级元素可以横排展示
行内元素可以设置宽高
元素既能设置宽高也能排在一排

4.4 隐藏元素

display:none
包括他的子标签，在页面中不占位置，等同于消失了

4.5 多媒体标签

什么是video标签?
作用: 播放视频
```
格式:
<video src="">
</video>
```
video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

muted:静音
width/height: 和img标签中的一模一样-

什么是audio标签?
作用: 播放音频

格式:
<audio src="">
</audio><audio><source src="" type="">
</audio>

5、HTML书写规范

   1.名字用小写字母2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文3.驼峰命名className  第二个单词首字母大写4.id命名id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样5.class命名class可以出现多次，而且相同的名字可以有多个，相当于人名一样

一、前端必须掌握HTML的基础知识相关推荐

前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
新人学习web前端必须要知道的基础知识，让你轻松入门
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天我就给大家简单介绍一下. HTML 超文本标记语言 ...
Web前端入门学习之JS基础知识梳理汇总
Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错.不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业. 不过,学习要一步一个脚印,不能一口吃一个胖子 ...
你应该知道的前端9种图片格式基础知识
彩色深度彩色深度标准通常有以下几种: 8位色,每个像素所能显示的彩色数为2的8次方,即256种颜色. 16位增强色,16位彩色,每个像素所能显示的彩色数为2的16次方,即65536种颜色. 24位真 ...
Web前端之HTML 与 CSS基础知识
typora-root-url: images typora-copy-images-to: images HTML 与 CSS 主要内容 HTML HTML(HyperText Markup L ...
【前端】【JavaScript】基础知识
文章目录 JavaScript 基础阶段一. 初识 JavaScript (一) JavaScript 的作用 (二) HTML/CSS/JS 的关系 (三) 浏览器执行 JS 简介 (四) JS ...
前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？
文章目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲 ...
一文搞懂【Web 前端】HTML 与 CSS 基础知识
摘要一个 Web 页面是如何在浏览器上展示的?我们在浏览器上查看网页源代码,可看到众多的标签.符号和文字,这就是一个 HTML 文件,而浏览器可以将这个文件解析成一个 Web 页面.一个 Web 页 ...

一、前端必须掌握HTML的基础知识