目录
其他
HTML定义
基本结构
语言
字符集
注释
基本约定
元素
标签
实体
路径
图片
链接
表格
表单
Web
结构 : HTML(超文本标记语言)
表现 : CSS(层叠样式表)
行为 : JavaScript(脚本语言)
参考文章 : Web 和 Web标准
文档参考网站 :
MDN : MDN
W3C : W3School
书籍推荐 ( 英文原版 ) :
<Head First - HTML with CSS & XHTML> Head First - HTML with CSS & XHTML
<Head First HTML5 Programming Building Web Apps with JavaScript> Head First HTML5 Programming Building Web Apps with JavaScript
编辑器
Sublime Text Sublime Text
HbuliderX HbuliderX
visual studio code visual studio code
WebStorm10
DWCS6
浏览器分类
IE 内核Trident
Firefox(火狐) 内核Gecko
Safari 内核Webkit
Chrome(谷歌) Oprea 内核Blik
Edge 内核Chromiun和Blink
网络协议
http HTTP
https HTTPS
怪异模式和标准模式
W3C标准
浏览器Web标准/W3C(万维网联盟)
VScode快捷键
快速生成HTML骨架快捷键
- 英文"!" + Tab
- 英文"!" + Enter
- html + : (既英文冒号) + 5
Ctrl + Enter 双标签中转为下一行
Shift + Alt + ↓ 双标签中向下复制整行
HTML
超文本标记语言
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
基本结构
<html>
<head>
<title>网页标题</title>
</head>
<boby>
网页内容
</boby>
</html>参考文章 : HTML头部
语言
<html lang="en">
<!-- e英文 zh-CN中文 fr法文-->
</html>参考文章 : HTML语言代码参考手册
字符集Charset
<head>
<meta Charset=" ">
<!-- GB2312简体中文 BIG5繁体中文 GBK简体繁体中文 UTF-8(utf-8)所有语言-->
</head>参考文章 : HTML编码(字符集)
注释
<html>
<!-- 注释 -->
</html>参考文章 : HTML注释
基本约定
参考文章 : HTML(5)样式指南和代码约定
元素
元素( Element )指的是从开始标签（start tag）到结束标签（end tag）的所有代码
参考文章 : Element元素
块级元素(块元素)
独占一行 , 只能出现在<body> </body>元素内。
例 :
<h1>~<h6> <form> dl <dd> <hr> <ol> <ul> <p> <table> <div> <adress> , <article> , <aside> , <bolckquote> , <fieldest> , <figcaption> , <figure> , <footer>, <header , <hgroup> ,<pre> , <section> ,
参考文章 : 块级元素
行内元素(内联元素)
只占据它对应标签的边框所包含的空间
例 : <b> <strong> —— 字体加粗
<big> <small> —— 字体改变大小
<i> <em> —— 字体倾斜
<u> <ins> —— 字体添加下划线
<s> <del> —— 字体添加删除线
<br> —— 换行
<input> <textarea>
<img> —— 添加图片
<span>
<q> ——引用标签
<label>—— 定义标注标签 , 配合<input>按钮使用增加用户体验
<tt> , <abbr> , <acronym> , <cite> , <code> , <dfn> , <kbd> , <samp>, <var.a> , <bdo> , <map> , <object>, <script>, <sub> , <supbutton> ,<select>
参考文章 : 行内元素
标签
声明标签
<head>
<!DOCTYPE>
<!-- 文档类型声明标签 -->
<!-- doc文档,type类型 -->
</head>参考文章 : HTML<!DOCTYPE>
根标签
<html> </html>
骨架标签
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html><meta> 标签
提供有关页面的元信息。位于文档的头部，不包含任何内容。 在 HTML 中，<meta> 标签没有结束标签。
参考文章 : HTML<meta>标签
双标签
标题标签
<h1></h1>~<h6></h6>
参考文章 : HTML标题
段落标签
<p></p>
可根据浏览器页面大小改变每行字数
参考文章 : HTML段落
盒子标签
<div> </div> —— 单独占一行 , 此标签内可存放任何标签和内容
参考文章 : <div>：内容划分元素
<span> </span> —— 一行可存在多个
等
参考文章 : <span>
有序列表标签
<ol> </ol> , <li> </li>
<li> </li>—— 标签内可存放任何标签和内容
<body>
<ul>
<li>内容</li>
<li>内容</li>
</ul>
</body>参考文章 : <ol>
无序列表标签
<ul> </ul> , <li> </li>
<li> </li>—— 标签内可存放任何标签和内容
<body>
<ol>
<li>内容</li>
<li>内容</li>
</ol>
</body>参考文章 : <ul>
自定义列表标签
<dl> </dl> , <dt> </dt> , <dd> </dd>
dt只有一个 , dd有很多个
<body>
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
</body>参考文章 : <dl>
参考文章 : HTML列表
单标签
<br>或<br/>—— 换行 ( 只能在HTML5中去掉 "/" ) ,
<nobr>或<nobr/> —— 不换行 ,
<hr>或<hr/>—— 水平线 ,
<img>—— (必带属性 : src=" ”) 插入图片 ,
<input> —— 输入，表单控件 ,
<link> —— 链接，关联
等
实体
空格实体
—— 不换行空格 , 既空格键
  ——半角空格 , 字体度的一半
  —— 全角空格 , 16px
  ——窄空格
‌ ——零宽不连字
‍ —— 零宽连字
参考文章HTML中的& nbsp; & ensp; & emsp;等6种空格标记
路径
相对路径(常用)
../ —— 向上一个文件夹返回查找文件 , 不能跨储存盘
./ —— 可查找当前根目录所有文件
绝对路径
\ ——可跨储存盘
或直接输入文件地址
参考文章 : HTML文件路径
图片
直接插入图片 :
<body>
<img src="">
</body>图片替换的文字 : alt=" "
提示文本 : title=" "
修改图片大小 : 图片的width(宽)和height(高)可一起修改 , 若只写其中一个 , 图片等比例缩放
参考文章 : HTML图像
链接
链接外地网址 :
<body>
<a href=""></a>
<!--不写target属性则默认在当前网页打开-->
<!--target="_self"在当前网页打开-->
<!--target="_blank"在新的网页打开-->
</body>链接内部网址
- 添加其他的html文件 :
<a href=""(文件位置)></a> - 回到顶部 :
<a href=" ">或<a href="#"> - 不回顶部 :
<a href="javascript:;"></a>
下载链接
添加zip文件 : <a href=" "(zip文件位置)></a>
锚链接
寻找 : <a href="#+锚链接名字">名字</a>
定位 : <id = "锚链接名字">
参考文章 : HTML链接
表格
表格标签
<table> </table>——表格
<tbody> </tbody> ——表格主体
<thead> </thead>——表格头部
<th> </th> ——表头单元格
<tr> </tr> ——行
<td> </td>——单元格
<ul><lul>——无序的列表
<li></li>——列表项
表格属性
height——表格高
width ———表格宽
border———表格边框——默认1 , " "——代表没有边框
align ———表格对齐方式
lift——居左
center ———居中
right ——居右
cellpadding ——像素值——单元格与内容的距离——默认1像素
cellspacing ——像素值——单元格之间距离——默认2像素
合并表格
跨行合并——rowspan="——从上到下合并，最上面开始，以下删除
跨列合并——colspan=" "——从左到右合并，最左边开始，以右删除
参考文章 : <table>
表单
表单在网页中主要负责数据采集的功能，和向服务器传送数据
表单标签 : 包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法
表单域 : 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
表单按钮 :包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
后台地址 : xxx.php
参考文章 : HTML表单
表单控件 :
<input> : 输入列表 <input type="属性值">
默认属性值为text , 即 <input type="text"> , 文本框 , 单行 , 默认20个字符
password : 密码框
value : 规定input元素的值 , 用户自定义
placehloder : 占位符 , 提示作用
select : 下拉列表
<body>
<form>
<select>
<option></option>
<option></option>
<!--至少要含有一对option标签-->
</select>
</form>
</body><textare> : 文本域 : 文本框可放大缩小
<textare cols=" "(每行的字数)>(一般用css制作)
<textare rows=" "(显示的行数)>(一般用css制作)
参考文章 : input
只能在表单内使用的按钮(可放入图标/图片)
<input type="submit"> : 默认按钮内文字 " 提交 "
<input type="reset"> : 默认功能重置 , 清除以上所有信息
按钮
没有位置限制的按钮 :
<input type="button"> : 普通按钮 , 没有实质作用 , 需后期js添加功能
<button> </button>
参考文章 : <button>
上传文件的按钮 :
<input type="file">
图片按钮 :
<input type="image src=" " ">
隐藏域
hidden : 属性 , 隐藏的输入字段 , 不给用户使用 , 程序员写给后台进行其他用途
参考文章 : hidden
Comments | NOTHING