本文最后更新于：2 小时前

HTML基础

前端开发 Web Front-end development
前端开发：开发什么？
结构布局、样式呈现、页面的动态交互
js-脚本
数据交互处理、数据格式化渲染

结构布局、样式呈现、行为逻辑
HTML CSS JavaScript

网页基本结构

<!DOCTYPE>文档类型声明
<html>根标签
<head>头部标签
<body>主体标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
  </head>
  <body></body>
</html>

head标签

head标签一般包含 title、meta

搜索引擎认知的优先级
title>description>keywords

title

网页标题
主页：网站名称 + 主要的关键字/关键词的描述
详情页：详情名称+网站名称+简介
列表页：分类名称+关键字+网站名称
文章页：标题+分类+网站名称

keywords

关键字一般100个字符，
网站名称+分类信息+网站名称

description

描述信息，80-120汉字
综合title+keywords的简单描述

编码字符集

GB2312、GBK、UTF-8

1	`<meta charset="UTF-8" /><!--设置编码字符集-->`

GB2312：中国信息处理国家标准码（简体中文码）
GBK：汉字扩展规范（扩大汉字收录、增加了繁体中文、增加了藏蒙维等少数民族文字）
UTF-8：Unicode（万国码）

元素

标签和里边的内容叫元素
元素分为：内联元素(行间/行内元素)、块级元素、内联块级元素(行内块元素)

内联元素(inline element)

内联元素不独占一行、无法定义高宽，设置margin，padding，但只在水平方向有效
a – 锚点
abbr – 缩写
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
span – 常用内联容器，定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框
sub -下角标签
sup - 上角标签

块级元素(block element)

块级元素独占一行，可以定义宽高，可以设置margin，padding
address – 地址
blockquote – 块引用
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – h6 标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li - 列表项目
dl / dt / dd / fieldset / legend

内联块级元素(inline-block element)

内联块级元素，也叫行内块元素，它具有内联元素的部分特性之外，还具备了块级元素的部分特性。
不独占一行，可以定义宽高
内联块级元素比较少，它们分别是：img、input、td、select、textarea、label、iframe

特点

和相邻的内联块级元素在一行上，但是中间会有空白的间隙
默认的宽度就是本身内容的宽度
高度，行高，内边距和外边距都可以设置
内联块级元素的转换
通过设置CSS样式属性display:inline-block，可将内联元素，或块级元素转换成内联块级元素；
但如果是将元素转换成内联元素，则设置display:inline；
如果是将元素转换成块级元素，则设置display:block；
inline-block是css2.1新增的属性，对于IE7以下的版本不支持这个属性，所以需要一些兼容的办法。
元素嵌套
内联元素可以嵌套内联元素，
块级元素可以嵌套任何元素

p标签不可以嵌套div，a标签不可以嵌套a标签

基本标签

HTML 标签参考手册
标签也有语义化标签和物理标签
推荐使用语义化标签可读性强，可维护性强，有利于搜索引擎识别

h1 标题标签

块级元素
标题标签，粗体，独占一行
h1-h6 层级和字体逐渐减小

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

p 段落标签

块级元素
段落标签，独占一行

br 强行换行

内联元素
是p标签中强行换行，单标签

<p>
  使用 br 元素
  

  在文本中
  

  换行。
</p>

` `空格符

空格符，特殊标记
style="text-indent: 2em"缩进可用样式来做

1	`<p style="text-indent: 2em">段落标签</p>`

在编译器内，文本的空格和换行都是文本分隔符

strong 粗体(语义化标签)

内联元素
粗体(语义化标签)
相比物理标签，语义化标签语气更强

1	`<strong>123</strong>`

b 粗体(物理标签)

内联元素
粗体(物理标签) （少用）

1	`<b>123</b>`

em 斜体标签(语义化标签)

内联元素
斜体标签(语义化标签)

1	`<em>斜体</em>`

i 斜体标签(物理标签)

内联元素
斜体标签(物理标签)，常用于加图标

1	`<i>斜体</i>`

del delete标签

内联元素
delete标签，在文本中间加横线

1	`<del>delete标签</del>`

style="text-decoration: line-through"同样可以达到效果

1	`<p style="text-decoration: line-through">我是p标签</p>`

ins 下划线标签

内联元素
下划线标签

1	`<ins>下划线标签</ins>`

style="text-decoration: underline"样式写下划线

1	`<p style="text-decoration: underline">我是p标签</p>`

address 地址标签

块级元素
地址标签，斜体(语义化，表示地址)

1	`<address>崇文路2号</address>`

div 容器

块级元素
容器、盒子，有高宽。网页的结构标签布局标签

1
2
3

<div style="width: 100px; height: 100px; border: 1px solid #000">
  123
</div>

div中如果是中文会换行，如果是连续的字符串会超出容器，不会换行。

<div style="width: 50px; height: 50px; border: 1px solid #000">
  afhiuagdiagwdiawdkawdkkhkuh
</div>
<div style="width: 50px; height: 50px; border: 1px solid #000">
  你好我是某
</div>

因为浏览器不认识中文字符，认识英文，以为是一个单词

html实体字符

< <
> >
空格  
HTML 编码（字符集）

hr 分隔符标签

块级元素

img 图标标签

内联元素、内联块级元素
图片标签，src属性添加路径，alt加载失败时的提示，title鼠标移动到图片上时的提示

1	`<img src="" alt="" title="" />`

a 锚点/超链接标签

内联元素
锚点标签

超链接标签

href设置打开的链接，target="_blank"设置在新的窗口打开

1	`<a href="https://www.baidu.com" target="_blank">百度</a>`

打电话

移动端常用

1	`<a href="tel:11">联系11</a>`

发邮件

1	`<a href="mailto:123@qq.com">发邮件</a>`

锚点定位

协议限定符

<a href="">点击刷新</a>
<a href="javascript:;">点击不刷新</a>
<a href="javascript:void(0)">点击不刷新</a>
<a href="javascript:alert(123)">点击打开弹窗</a>

sub 上角标标签

内联元素

<p>
  上角标 10
  <sup>2</sup>
  文献
  <sup>[1]</sup>
</p>

sup 下角标标签

内联元素

<p>
  下角标 H
  <sub>2</sub>
  SO
  <sub>4</sub>
</p>

span

内联元素
常用内联容器，定义文本内区块。
span标签可以在一段文本里强调或者区分其他文本。设置标识，快速获取到想要的内容

<p>
  123
  <span id="111" style="color: red">111</span>
  12
</p>
<script>
  let num = document.getElementById('111')
  console.log(num.innerText) //111
</script>

ol 有序列表

块级元素
type设置数字，字母，罗马等序列。
reversed="reversed"设置倒序
start 只有数字才有效果，从第几开始
如果是字母，超过26位数用aa，ab表示
如果是设置数字，倒序，从中间开始，序列会有0和负数

<ol type="1" start="" reversed="reversed">
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
</ol>

ul 无序列表

块级元素
ul 最大的用处是布局
type=” disc | square | circle “ 设置实心圆，方形。空心圆

<ul type="disc">
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
</ul>

ul 无序列表做导航栏

<style>
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  a {
    text-decoration: none;
  }
  .wrapper {
    width: 100%;
    height: 66px;
    box-shadow: 0 0 5px #999;
  }
  .wrapper ul {
    height: 100%;
  }
  .wrapper ul li {
    float: left;
    height: 100%;
    line-height: 66px;
  }
  .wrapper ul li a {
    display: block;
    height: 100%;
    font-size: 18px;
    color: #666;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .wrapper ul li a:hover {
    color: #23b8ff;
    border-bottom: 5px solid #23b8ff;
  }
</style>
<div class="wrapper">
  <ul>
    <li><a href="javascript:;">前端</a></li>
    <li><a href="javascript:;">后端</a></li>
    <li><a href="javascript:;">大数据</a></li>
    <li><a href="javascript:;">人工智能</a></li>
    <li><a href="javascript:;">机器学习</a></li>
  </ul>
</div>

dl 定义列表

块级元素
定义列表

dt

块级元素
定义列表中的项目

dd

块级元素
描述列表中的项目

<dl>
  <dt>计算机</dt>
  <dd>用来计算的仪器 ... ...</dd>
  <dt>显示器</dt>
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

table 表格标签

块级元素
表格标签
border属性设置边框，cellpadding设单元格内边距，cellspacing单元格间距

captain 标题标签

tr 表格行标签

th 表头标签

td 单元格标签

内联块级元素
colspan属性合并列单元格
rowspan属性合并行单元格
align="left|center|right"设置对齐
增加数据只需要增加单元格标签

<table border="1" cellpadding="10" cellspacing="10">
  <caption>金额表</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>12</th>
      <th>备注</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>00</td>
      <td rowspan="2">无</td>
    </tr>
    <tr>
      <td>Anuary</td>
      <td>Ay</td>
      <td>12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="4" align="center">123</td>
    </tr>
  </tfoot>
</table>

thead 表格页面标签

tfoot 表格页尾标签

tbody 表格的主体标签

这三个标签必须同时使用，加载顺序是 thead- tfoot - tbody
如果不加这三个标签，表格需要等所有数据加载完之后才渲染出来。
加了这三个标签，页眉和页尾先加载，任何才加载主体部分

iframe 内联框架标签

内联块级元素
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
对于搜索引擎不友好，滚动条体系混乱，无法监控iframe内的事件和数据变化，两个iframe之间数据传递麻烦
scrolling='yes|no|auto'滚动条设置
frameborder 边框

表单标签

form 交互表单

块级元素
method="get|post"属性设置表单提交方式
action=""属性设置表单提交地址

表单提交数据两大要数是数据名称和数据名称对应的值

提交表单时前端需要先进行验证，常用MD5加密。之后后端再验证
MD5是消息摘要的算法，是不可逆加密算法，只要加密了就不能解密，这种加密方式不需要提供密钥

imput 文本输入框

内联块级元素
type属性设置输入类型
name属性设置数据名称
value属性可以设置也可以设置默认值
maxlength=’5’ 属性设置最大值，设置等于5 不管中文还是数字最多五个字符
placeholder 设置默认提示
readonly属性设置只读，不可输入，提交数据时能够提交
disabled属性设置禁用，不可输入，提交数据是不可以提交

<form method="get" action="">
  <p>
    用户名：
    <input type="text" name="username" />
  </p>
  <p>
    密码：
    <input type="password" name="password" />
  </p>
  <p>
    <input type="submit" value="提交" />
  </p>
</form>
<!-- http://127.0.0.1:5500/HTML.html?username=111&password=123 -->

label>

内联元素、内联块级元素
label的for属性值与某一个input的id值相同时，点击label可以聚焦改input输入框

<form method="get" action="">
  <label for="username">用户名</label>
  <input id="username" type="text" name="username" />
</form>

js模拟placeholder，针对对样式要求高，动态渲染数据，可定制化

<form action="">
  <input
    type="text"
    value="请输入关键字"
    onfocus="focusInput(this)"
    onblur="blurInput(this)"
  />
</form>
<script>
  function focusInput(obj) {
    if (obj.value === '请输入关键字') {
      obj.value = ''
    }
  }
  function blurInput(obj) {
    if (obj.value === '') {
      obj.value = '请输入关键字'
    }
  }
</script>

radio 单选

在input设置radio是单选，checked是默认选中，设置name统一选择项，value设置选择的值

<form action="" method="get">
  <input type="radio" name="sex" id="male" checked value="male" />
  <label for="male">男士</label>
  <input type="radio" name="sex" id="female" value="female" />
  <label for="female">女士</label>
  

  <input type="submit" value="提交" />
</form>
<!-- http://127.0.0.1:5500/HTML.html?sex=female -->

checkbox 多选

<form action="" method="get">
  <p>
    <input type="checkbox" name="myLang" id="js" value="js" />
    <label for="js">js</label>
  </p>
  <p>
    <input type="checkbox" name="myLang" id="JAVA" value="JAVA" />
    <label for="JAVA">JAVA</label>
  </p>
  <p>
    <input type="checkbox" name="myLang" id="c" value="c" />
    <label for="c">c</label>
  </p>
  <p>
    <input type="submit" />
  </p>
</form>
<!-- http://127.0.0.1:5500/HTML.html?myLang=js&myLang=JAVA&myLang=c -->

select 下拉列表

内联块级元素

option 选项

在select中设置name，如果option不设置value，传入的值是option里的内容。

<form action="" method="get">
  <select name="data">
    <option value="">请选择</option>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>
  

  <input type="submit" />
</form>
<!-- http://127.0.0.1:5500/HTML.html?data=1 -->

textarea 多行文本输入框

内联元素、内联块级元素
cols 可见宽度，rows 可见行数
textarea没有value属性，它的value值在两个标签之间
textarea标签中间不可以空格或者换行，否则光标就会出现在中间。因为textarea的文本在两个标签之间的，如果换行或者空格会占用它的字符显示

<form action="" method="get">
  <textarea name="" id="text" cols="30" rows="10">123<div></textarea>
  

  <input type="text" placeholder="请输入" />
  

  <input type="submit" />
</form>
<script>
  let text = document.getElementById('text')
  console.log(text.value) //123<div>
  console.log(text.innerHTML) //123&lt;div&gt;
</script>

fieldset

块级元素
标签将表单内容的一部分打包，生成一组相关表单的字段

legend

块级元素
legend 元素为 fieldset 元素定义标题（caption）

<fieldset>
  <legend>分类</legend>
  <form action="" method="get">
    请输入
    <input type="text" />
  </form>
</fieldset>
<fieldset>
  <legend>分类</legend>
  <form action="" method="get">
    请输入
    <input type="text" />
  </form>
</fieldset>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：
    <input type="text" />
    体重：
    <input type="text" />
  </fieldset>
</form>

HTML

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

CSS基础上一篇

JavaScript基础下一篇

HTML基础

HTML基础

网页基本结构

head标签

title

keywords

description

编码字符集

元素

内联元素(inline element)

块级元素(block element)

内联块级元素(inline-block element)

特点

内联块级元素的转换

元素嵌套

基本标签

h1 标题标签

p 段落标签

br 强行换行

&nbsp;空格符

strong 粗体(语义化标签)

b 粗体(物理标签)

em 斜体标签(语义化标签)

i 斜体标签(物理标签)

del delete标签

ins 下划线标签

address 地址标签

div 容器

html实体字符

hr 分隔符标签

img 图标标签

a 锚点/超链接标签

超链接标签

打电话

发邮件

锚点定位

协议限定符

sub 上角标标签

sup 下角标标签

span

ol 有序列表

ul 无序列表

ul 无序列表做导航栏

dl 定义列表

dt

dd

table 表格标签

captain 标题标签

tr 表格行标签

th 表头标签

td 单元格标签

thead 表格页面标签

tfoot 表格页尾标签

tbody 表格的主体标签

iframe 内联框架标签

表单标签

form 交互表单

imput 文本输入框

label>

radio 单选

checkbox 多选

select 下拉列表

option 选项

textarea 多行文本输入框

fieldset

legend

` `空格符