标签：间隔 int hyper 调用 www. 之一 标签 maximum 搭建
? 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
? 前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript
广义前端：所有用户可以直接看见并交互的界面
侠义前端：浏览器上运行的用户交互界面
超文本标记语言 Hyper Text Markup Language
负责完成页面的结构
文件后缀：.html .htm
级联样式表 Cascading Style Sheet
负责页面的风格设计，样式、美观
文件后缀：.css
浏览器脚本语言，可以编写运行在浏览器上的程序
负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM)，从后端获取数据(Ajax)，渲染页面等
文件后缀：.js
# html三个组成部分
# 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)
# 指令: <!开头> => <!doctype> <!-- -->
# `: &; 包裹 => 特殊的字母 | #十六进制数
DOCTYPE：指定文档类型，规定html标签语法
html：文档根标签，标注着文档(页面)的开始与结束
head：文档头标签，可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
body：文档主体标签，包含文档所有文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
外联样式表
<link rel="stylesheet" type="text/css" href="style.css" />
文档tag图标
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
内联样式表
<style></style>
<script type="text/javascript"></script>
<div></div>
<span></span>
<hn></hn> 标题
<p></p> 段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线
<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语气更强)
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
<section></section> 块
<small></small> 小号字体
// 最基本
div => 搭页面架构
span => 搭文本架构
?
// 换行显示
h1~h6 => 标题, h1有且只有一个,作为页面总标题
p => 段落
?
// 同行显示
文本类标签
i,em => 斜体
b,strong => 加粗
del | ins | sup | sub
?
// 组合
table>tr>th+td
form>input
?
// 功能
img 图片 | a 超链接 | hr 分割线 | br 换行
单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
<hr/>,<br/>
双标签：双标签有成对的结束标识，主要应用场景为内容性标签
<div></div><span></span>
行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
<i></i> 斜体字<em></em> 斜体字，表示强调<b></b> 粗体字<strong></strong> 粗体字，表示强调(语气更强) <del></del> 删除的文本<ins></ins> 插入的文本<sub></sub> 下标字<sup></sup> 上标字
块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行
<p></p> 段落
单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使用，才能产生相应的内容与效果
table>tr>th+tdform>input
今日基础标签汇总
  代表一个空格
?
< 代表<
?
> 代表>
?
<div ></div><!-- div: 最常用的标签,没有之一 (搭建页面架构) -->
?
<span></span> <!-- span: 文本最常用标签 (构建文本架构:可以直接包裹文本,
?
与可以包裹其他文本类(内联类型的)标签) -->
?
<!-- 标题标签: h1~h6 -->
?
<h1>一级标题</h1><!-- 一般一个页面会出现一次,作为该页面的总标题出现 -->
?
<h2>二级标题</h2>~<h6>六级标签</h6>
?
<p>xxxxx</p> 段落标签,段落和段落之间会自动有一行间隔
?
<pre></pre>里面写一些字符和空格会正常显示,有其他标签不会显示
?
<hr/>会产生分割线
?
<br />换行#可能会产生不可控的状况 一般会用样式来实现
?
<i>aa</i> 斜体字
?
<em>aa</em> 斜体字，表示强调
?
<b>aa</b> 粗体字
?
<strong>aa</strong> 粗体字，表示强调(语气更强)
?
<del>aa</del> 删除的文本
?
<ins>aa</ins> 插入的文本
?
<sub>aa</sub> 下标字
?
<sup>aa</sup> 上标字
?
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
?
<section></section> 块
?
<small></small> 小号字体
?
<!-- 链接标签 -->
<!-- href: 标签的全局属性, 超链接, 规定协议 -->
<!-- 不规定:做路径的拼接 -->
<!--target="_blank">_blank表示开一个新的连接开启网站,_self不开新连接直接开启网站
<a href="https://www.baidu.com" target="_blank">前往百度</a>
?
?
<!-- 图片标签 -->
<!-- src:数据源, 可以加载网络 | 本地 | 动态 图片 -->
<!-- alt:资源加载失败的文本提示 -->
<!-- title:鼠标悬浮产生的文本提示(任意标签都具有该全局属性) -->
<img src= "http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180712/5b9bdbe624bf412ba6e044f0caefb1cb.gif" alt="二哈" title="小二哈">
?
<!-- 表格 -->
<!-- table>(tr>th{标题}*2)+(tr>td{单元格}*2) -->
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
?
<!-- 表单 -->
input就是用户输入然后获取值
被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->
?
<input type="text" value="abc" placeholder="请输入">
<form>
<input type="text">
<input type="password">
</form>
标签：间隔 int hyper 调用 www. 之一 标签 maximum 搭建
原文地址：https://www.cnblogs.com/jutao/p/10066876.html
