南南NaN
南南NaN

2020Web前端知识点总结-HTML篇

下一篇：2020Web前端知识点总结-CSS篇（一）

1、HTML 基本文档



<html lang="en"> 
  	<head>
   		 <title>文档标题title>
  	head>
  	<body>
    	可见文本...
  	body>
html>

1.1、扩展

代码 参考扩展
lang属性的值：en表示为英文
zh中文简体
HTML的 lang 语言代码 参考手册
说明 基本文档的元素中引入元素
引入CSS样式表 2020Web前端知识点总结-HTML篇_第1张图片
元素 待更新
元素 待更新
元素 待更新

2、HTML基本标签

<h1>最大的标题h1>
<h2> . . . . h2>
<h3> . . . . h3>
<h4> . . . . h4>
<h5> . . . . h5>
<h6>最小的标题h6>
 
<p>这是一个段落。p>
<br> （换行）
<hr> （水平线）

2.1、扩展

代码 参考扩展

最大的标题

 一个页面中建议最多只是用一次该标签，并在比较重要的地方使用比如网站logo，有利于SEO

3、HTML语义化标签

语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

  • 便于团队开发维护
  • 便于其他设备解析（屏幕阅读器，盲人阅读器）
  • 有利于SEO（搜索引擎及爬虫更理解网页）

3.1、文本语义格式化（含h5）

<b>粗体文本b>
<strong>重要的文本加粗strong> 

<i>斜体文本i>
<em>斜体强调文本em>


<del>删除的文本del>


<ins> 插入的文本ins>

<kbd>键盘输入kbd>
<code>计算机代码code> 
<pre>预格式化文本pre>
<small>更小的文本small>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<sub> （下标文本）
<sup> （上标文本）

3.1.1、扩展

代码 参考扩展
删除的文本
插入的文本		 一般搭配使用如电商项目中
删除文本：原价888￥
插入文本： 特价666￥

3.2、结构语义格式化（h5常用 ie9及以上兼容）

<header>头部header>


<nav>标签定义导航链接的部分nav>
<nav>
	<a href="xx.asp">xxa>
	<a href="xxx.asp">xxxa>
	<a href="xxxxx.asp">xxxa>
nav>


<section>区块（相当于语义化的div）section>


<main>主要区域，在一个文档中，只能出现一次，不能是语义化元素的后代main>
<main>
  	<article>
    	<h1>Mozilla Firefoxh1>
    	<p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器。p>
  	article>
main> 


<artical>主要内容（标签规定独立的自包含内容）artical>
<article>
  	<h1>Internet Explorer 9h1>
  	<p>Windows Internet Explorer 9（简称 IE9）p>
article>


<aside>侧边栏aside>


<footer>底部footer>


<hgroup>专门用来包含标题h标签的分组hgroup>
<hgroup>
  	<h1>Welcome to my WWFh1>
  	<h2>For a living planeth2>
hgroup>


<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<details>
	<summary>HTML 5summary>
	This document teaches you everything you have to learn about HTML 5.
details>


组合图片标题
<figure>
    <figcaption>黄浦江上的的卢浦大桥figcaption>
    <img src="haha.jpg" width="666" height="666" />
 figure>

3.2.1、扩展

header, section, footer, aside, nav, main, article, figure这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block


header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

4、HTML块元素及内联元素

<div>文档中的块级元素div>
<span>文档中的内联元素span>

5、HTML图片

<img src="URL" alt="替换文本" title="鼠标悬停时显示文字" height="42" width="42">
属性及值
一般height和width这两个属性设置其中一个另一个会自动等比例缩放

6、HTML超链接


<a href="http://www.example.com/" target="_blank">链接文本a>

<a href="http://www.example.com/" target="_self">
	<img src="URL" alt="当图片不显示是显示的文字">
a>

<a href="mailto:[email protected]">发送e-maila>

<a href="tel:10086">拨打电话a>

锚点定位：
<a id="tips">提示部分a>
<a href="#tips">跳到提示部分a>

6.1、扩展

属性及值 扩展参考
href="JavaScript:;"
href="JavaScript:viod(0);"		 点击超链接不做任何跳转操作
target="_blank"
target="_self"		 _blank新窗口打开页面
_self本身窗口打开页面

7、HTML列表


<ul type="disc"> [type="disc /circle / square" 实心圆/空心圆/实心方块] 
    <li>无序列表li>
    <li>无序列表li>
ul>


<ol>
    <li>有序列表li>
    <li>有序列表li>
ol>


<dl>
  	<dt>项目 1dt>
    	<dd>描述项目 1dd>
  	<dt>项目 2dt>
    	<dd>描述项目 2dd>
dl>

7.1、扩展

属性及值 说明 实际使用
ul无序列表
type="disc"
type="circle "
type="square"		 不指定type时默认为 disc实心圆
不赞成使用。请使用样式代替		 css去除列表样式
list-style: none;



1 2 3 4…
a b c d …
A B C D …
i ii iii …
I II III…
不赞成使用。请使用样式代替

8、HTML表格

 【】
 【】==不赞成使用。请使用样式代替==
 【】==不赞成使用。请使用样式代替==
 <table border="1" cellspacing="0" cellpadding="2">
      <caption>
        表格标题
      caption>
      <thead>
        	<tr>
          		<th colspan="2">表头th>【】
          		<th>表头th>
        	tr>
      thead>
      <tbody>
        	<tr>
          		<td colspan="2">单元格td>【】
          		<td rowspan="2">单元格td>【】
        	tr>
        	<tr>
          		<td>单元格td>
          		<td>单元格td>
        	tr>
      tbody>
  table>

9、HTML表单（常用含h5）


<form action="demo_form.php" method="post/get" name="XXX">
      <input type="text" value="值" name="usename" size="20" maxlength="50" />
      <input type="email" name="" id="" />
      <input type="url" placeholder="输入框内提示内容" name="" id="" />
      <input type="password" />
      <input type="checkbox" checked="checked" />
      <input type="radio" checked="checked" />
      <input type="submit" value="Send" />
      <input type="reset" />
      <input type="hidden" />
      
      下拉列表
      <select>
        	<option>苹果option>
        	<option selected="selected">香蕉option>
        	<option>樱桃option>
      select>
      
      <textarea name="comment" rows="60" cols="20">textarea>
      
      焦点绑定
      <label for="male">Malelabel>
  	  <input type="radio" name="sex" id="male" value="male">

      <input list="browsers">
      <datalist id="browsers">
  			<option value="Internet Explorer">
  			<option value="Firefox">
 			<option value="Chrome">
 			<option value="Opera">
			<option value="Safari">
	  datalist>
      ...
    form>

9.1、常用属性&值

属性 值 描述
type button
checkbox
color
date
datetime

datetime-local

email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		 type 属性规定要显示的元素的类型。
autocomplete New on
off		 autocomplete 属性规定元素输入字段是否应该启用自动完成功能。
autofocus New autofocus 属性规定当页面加载时 元素应该自动获得焦点。
checked checked checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled disabled disabled 属性规定应该禁用的 元素。
maxlength number 属性规定 元素中允许的最大字符数。
multiple New multiple 属性规定允许用户输入到元素的多个值。
name text name 属性规定 元素的名称。
pattern New regexp pattern 属性规定用于验证 元素的值的正则表达式。
placeholder New text placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。
readonly readonly readonly 属性规定输入字段是只读的。
required New required 属性规定必需在提交表单之前填写输入字段。
size number size 属性规定以字符数计的 元素的可见宽度。
enctype application/x-www-form-urlencoded

multipart/form-data

text/plain		 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）

9.2、扩展

css 扩展参考
outline:0;
outline:none;		 清除输入框选中时默认轮廓线样式（因为该默认样式在不同浏览器下效果不同）

10、HTML框架