Web 前端开发之小白入门

Web 前端笔记

 

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML标记本质上是用来描述页面内容的语义的，用文本描述文本的语义

 

 

*为什么要用正确的标签表达语义？

• 便于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 键 <=>

• li * 10 > a > img 然后点击 Tab 键

• 快捷键 F12 打开网页

*mate标签（只能出现在标签里）

• 声明当前页面所使用的字符集 

         

          需要注意的是，一定要让你声明的当前页面所使用的编码格式与当前页面文件的保存格式一致，否则就会出现乱码

           

           我们中文的世界里，目前采用的编码格式 ： UTF-8   GB2312(GBK/GB ： 国标）

•  给网站添加描述信息，便于搜素引擎搜索

• 给网站添加搜素关键字

 

*在 body 体里出现的 html 标签，可以分成两大类： 容器级--div、文本级--span （文字、图片、表单元素）

链接站外的地址要注意Http：//协议

*a标签

    注意：”~“ 符号在 ASP.NET 里表示当前网站的根目录，但是这个符号对于Html的相对路径来说是不管用的

    锚点 ： 点击我的著作.....我的著作  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标签）搭配使用