Web 前端笔记
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML标记本质上是用来描述页面内容的语义的,用文本描述文本的语义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--文档结构类型说明-->
*为什么要用正确的标签表达语义?
-
便于SEO(Search Engin Optimization)
-
能提高可访问性(对于用户)
-
能提高代码的可阅读性(对于开发人员)
*文档结构说明(文档类型说明)
有7种文档类型
HTML4.0-4.1 strict , Trannsitional , Formset
不严谨的HTML文档
快捷键:html:xt tab键
XHTML1.0 strict , Trannsitional , Formset
严谨的HTML文档:所有的标记都要小写
快捷键:html:xs tab键
HTML5 快捷键:html:5 tab键
*Sublime的用法
需要安装一个插件,叫做「emmet」
---PackageControl中直接安装即可
-
先保存网页
-
不需要完全的输入一个标签,你只需要输入标签的名字,然后点击Tab键
-
Ctrl + 鼠标滚轮 : 调整当前文档的显示字号大小
-
Ctrl + Shift + D : 复制当前光标所在行
-
Ctrl + Shift + K : 删除光标所在行
-
标签名 * n 然后点击Tab键 : 自动连续生成 n 个相同的标签
-
Ctrl + Shift + ↑ : 上移当前行
-
Ctrl + Shift + ↓ : 下移当前行
-
Ctrl + n : 创建新页面
-
Ctrl + z : 返回
-
div>p>img 然后点击 Tab 键 <=> <div><p><img src="" alt="" /></p></div>
-
li * 10 > a > img 然后点击 Tab 键
-
快捷键 F12 打开网页
*mate标签(只能出现在<head></head>标签里)
-
声明当前页面所使用的字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
需要注意的是,一定要让你声明的当前页面所使用的编码格式与当前页面文件的保存格式一致,否则就会出现乱码
我们中文的世界里,目前采用的编码格式 : UTF-8 GB2312(GBK/GB : 国标)
-
<meta name="description" content=" "/>给网站添加描述信息,便于搜素引擎搜索
-
<meta name = "keywords" content=" "/>给网站添加搜素关键字
*在 body 体里出现的 html 标签,可以分成两大类: 容器级--div、文本级--span (文字、图片、表单元素)
链接站外的地址要注意Http://协议
*a标签
注意:”~“ 符号在 ASP.NET 里表示当前网站的根目录,但是这个符号对于Html的相对路径来说是不管用的
锚点 : <a href = "#zhuzuo">点击我的著作</a>.....<a name="zhuzuo">我的著作</a> name属性是标准用法,用id也可以达到相同的效果
*ul标签
unordered list 无序列表,用来表示一组语义相同的项
li : list item
ul标签和li标签是成组出现的,即ul不能脱离li单独存在,li也不能脱离ul单独存在
ul标签里只能放li
li标签里可以放任何东西,可以非常复杂,甚至还可以在li里套ul
ul 可以用来做网页的导航
*ol标签
ordered list 有序列表,用来表示一组语义相关的项
ol标签和ul标签一样,ol也不能脱离li单独存在,必须成组出现
一般情况下,既然ul和ol都是表示一组语义相同的项,所以我们很少用ol,一般只用ul
*dl定义列表
dl : definition list
dt : definition title
dd : definition description
*label标签
它往往和表单元素(input标签)搭配使用