HTML全解

96 阅读4分钟

查阅资料

网道HTML教程》 、网页编辑器:JSbin、代码沙盒 Codesandbox

关键词 MDN文档搜索

预览网页:

// 方法1
yarn global add http-server
http-server . -c-1

// 方法2
yarn global add parcel
parcel xx.html

HTML 基本骨架

<!DOCTYPE html>      
<html lang="zh-CN">  
  <head>
    <!--文件的字符编码,utf-8支持全球语言-->
    <meta charset="UTF-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, 
      initial-scale=1.0, minium-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>网页标题</title>   
  </head>
  <body>   
  </body>
</html>

标签的全局属性

全局属性内容备注
class给标签划分类别<div class="middle">
contenteditable标签内容可直接编辑
hidden隐藏标签内容<div hidden>
id给标签指定标识尽量少用,不报错
style给元素指定样式元素上直接指定样式的优先级高
JS指定样式优先级更高
tabindex指定tab键顺序<h2 tabindex=1>
值为0最后一个,-1不要访问
title文字超长省略号

默认样式与重置

HTML发明时还没有CSS,浏览器给标签加上默认样式,但是都很丑,也就有了CSS Reset

查看默认样式,Chrome开发者工具,Elements -> Styles -> user agent stylesheet

重置样式:

//reset.css
*{margin:0; padding:0; box-sizing: border-box;}
*::after, *::before{box-sizing: border-box;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
button,input,select,textarea{font:inherit;}
table{border-collapse; border-spacing:0}

元素的显示模式

区别内容备注常见
块元素
display:block
<div> <p>
在页面中独占一行 自上而下垂直排列
可设置宽、高属性div / form / p / ul / ol / h1-h6 / li
内联元素 (行内元素)
display:inline
<span>
不会独占一行,在页面中只占自身大小
不可设置宽、高属性
本身宽高靠内容撑开
a / span / em / strong
行内块元素
display:inline-block
<img> <input>
不换行
能够识别宽、高button / img / input
div {
width: 200px;
height: 100px;
background-color: #dff;
}
h1 {
width: 300px;
height: 100px;
background-color: rgb(206, 206, 84);
}
span {
width: 300px;
height: 200px;
background-color: rgb(83, 103, 103);
}
.img1 {
width: 200px;
}
.img2 {
width: 200px;
}

<div>div</div>
<p>p</p>
<h1>h1</h1>
<span>span</span>
<strong>strong</strong>
<em>em</em>
<img class="img1" src="http.jpeg" alt="" />
<img class="img2" src="html.jpeg" alt="" />
image.png

常用标签

章节标签

<!DOCTYPE html>      
<html>  
<head>           
  <meta charset="UTF-8">
  <title>网页标题</title>
  <style>
    /*只要 class 含 middle*/ 
    .middle{
      background:black;
    }
    .bordered{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <header title=“完整的内容xxxx”>顶部广告</header>
  <main class="middle bodered">
    <h1>文章标题</h1>
    <h2 tabindex=1>副标题</h2>
    <section>
      <h2>第一章</h2>
      <p tabindex=2>一段话</p>
    </section>
  </main>
  <aside>
    参考资料
  </aside>
  <footer>&copy; 版权所有</footer>
</body>
</html>

内容标签

// ol+li (ordered list 有序列表)
<ol>  
  <li></li>
</ol>

//ul+li (unordered list 无序列表)
<ul>  
  <li></li>
</ul>

// dl+dt+dd (描述列表)
<dl>
  <dt><dt>
  <dd><dd>
</dl>

<pre> 可控制空格等格式在页面中显示 </pre>
<code> 里面的字是等宽的 </code>      // font-family:monospace
<hr> 这是一个分割线 </hr>
<br> 这是一个换行标签 </br>
<a href="http://qq.com">QQ</a>
<em> 可把内容改为斜体 </em>
<strong> 可把内容加粗显示 </strong>
<quote>  内容引用 </quote>

a 超链接

作用是跳转到外部页面、内部锚点、邮箱或电话

属性内容备注
href超链接
hyper ref
超链接的地址<a href="https://qq.com">
href取值有很多种:网址、路径
伪协议<a href="javascript:;">
target指定打开链接网址的方式<a target="_blank">
target取值有:内置名字、程序员命名
_blank/_top/_parent/_self
download
ref=noopener

table 表格

<table>
  <thead>
    <tr>
      <th></th>
      <th>小红</th>
      <th>小明</th>
      <th>小颖</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>数学</th>
      <td>61</td>
      <td>85</td>
      <td>98</td>
    </tr>
    <tr>
      <th>英语</th>
      <td>77</td>
      <td>88</td>
      <td>99</td>
    </tr>
    <tr>
      <th>语文</th>
      <td>81</td>
      <td>92</td>
      <td>84</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总分</th>
      <td>200</td>
      <td>200</td>
      <td>200</td>
    </tr>
  </tfoot>
</table>

<style>
table{
  width:600px;
  table-layout:auto;
  border-collapse:collapse;  // 合并
  border-spacing:0;
},
td,th{
  border:1px solid red;
}

img 图像

作用是发出get请求,展示一张图片

标题内容备注
alt属性图片加载失败显示的内容
height属性高度<img height="400">
width属性宽度<img width="400">
src属性图片地址
onload事件监听图片加载成功
onerror事件监听图片加载失败
max-width:100%
响应式
<style>
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  img{
    max-width:100%;  // 图片响应式
  }
</style>
<img id="xxx" width="400" src="dog2.png" alt="一只狗">
<script>
  xxx.onload = function(){
    console.log("图片加载成功");
  };
  xxx.onerror = function(){
    console.log("图片加载失败");
    xxx.src = "/404.png"
  };
</script>

form 表单

表单由容器和控件组成,用来给用户填写信息,向Web服务器提交信息,发出getpost请求,然后刷新页面。

用于创建供用户输入的 HTML 表单,包含一个或多个如下的表单元素: <input><select><option><label><button><textarea>

属性内容属性值
name规定表单的名称text
action规定当提交表单时向何处发送表单数据URL
autocomplete是否提示自动填充on / off
method规定用于发送表单数据的 HTTP 方法get / post
target规定在何处打开 action URL_blank / _self / _parent / _top
novalidate如果使用该属性,则提交表单时不进行验证novalidate

表单由表单标签、表单域(输入框)、表单按钮组成。

input标签

规定了用户可以在其中输入数据的输入字段,输入字段可通过多种方式改变,取决于 type 属性。

<form action="demo_form.php">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="提交" />
</form>

image.png

button标签

<button type="button">点我!</button>

type 属性的值有:buttonresetsubmit,规定按钮的类型。

select标签

用来创建下拉列表,<option> 标签定义了列表中的可用选项。

<select> 
  <option value="volvo">Volvo</option> 
  <option value="saab">Saab</option> 
  <option value="mercedes">Mercedes</option> 
  <option value="audi">Audi</option> 
</select>

image.png image.png

label标签

为 input 元素定义标注(标记),<label> 标签的 for 属性与相关元素的 id 属性相同,规定 label 与哪个表单元素绑定。

<form action="demo_form.php"> 
  <label for="male">Male</label> 
  <input type="radio" name="sex" id="male" value="male"><br> 
  <label for="female">Female</label> 
  <input type="radio" name="sex" id="female" value="female"><br><br> 
  <input type="submit" value="提交"> 
</form>

image.png

video视频

audio音频

canvas

svg