Web前端基础(1)HTML基础知识

HTML基础知识

HTML开发基础知识

HTML是HyperTextMarkupLanguage,超文本标记语言的缩写。是一种标记语意的文档格式。

任何纯文本编辑器都能够编辑html,比如记事本,editplus,notepad++

比较有名的专门制作网页工具

  • DreamWeaver (Adobe公司的产品,过时了,不是一个好的代码编辑器)
  • Sublime (高效率的程序书写工具)
  • WebStorm (更高级的项目级别编程工具)

Sublime

sublime的中文意思是“华丽的”,是2011年开始流行的代码编辑器,可以编辑java, c, php等很多语言, html, css, js在sublime中支持非常好

sublime中的常用快捷键

快捷键作用
ctrl + shift + d复制当前行
ctrl + 滚轮放大缩小文字
ctrl + shift + k删除当前行
ctrl + shift + 上箭头上移当前行
ctrl + shift + 下箭头下移当前行
ctrl + n新建文件

HTML语法

html骨架和基本语法特征

安装Emmet插件
参考连接:http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/

输入“html:xt”按Tab就会生成骨架

1
html:xt

Sublime自动生成html骨架

文档声明头

任何一个标准的HTML页面,第一行一定是一个以 <!DOCTYPE …… 开头的语句。(文档声明头)此标签告诉浏览器文档使用的是那种HTML或XHTML规范。

我们现在学习的是HTML4.01这个版本,这个版本是IE6开始兼容的。HTML5是IE9开始兼容的,但是IE 6,7,8这些浏览器还不能过早被淘汰,所以这几年网页还是该用HTML4.0.1来制作,移动端可以使用HTML5了。

HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范。
HTML4.01里面规定了普通,XHTML两大种规范。
HTML 觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?

所以,HTML就觉得,把一些规范严格的标准又制订了一个XHTML1.0。在XHTML中的字母X表示”严格的“
HTML4.01规定了三种文档类型:Strict, Transitional以及Frameset.所以HTML第一行有6种写法。

大规范里面的小规范
HTML4.01Strict / Transitional / Frameset
XHTML1.0Strict / Transitional / Frameset
  • strict表示严格的,这种模式要求比较严格,比如标签:

    1
    <u>让文本加上下划线,和html本质有冲突,html只能负责语意</u>
  • transitional表示普通的

  • Frameset 带有框架的页面

我们学习的就是XHTML1.0中的transitional版本,因为我们的页面中偶尔要使用一些类似u这种标签。HTML5中极大的简化了DTD,也就是HTML5中没有XHTML了。

字符集

1
<meta http-equiv="Content-Type"  content="text/html;charset=UTF-8">

字符集用meta标签定义,meta表示”元“。”元“配置就是标识基本的配置项。

例如

1
2
<meta name="Keywords" content="网易,邮箱,游戏" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

html的基本语法特征

  • html对换行不敏感。
  • html中文字之间所有空格,换行,tab都将被折叠为一个空格显示。
  • 标签要严格封闭

列表

有序列表ol (一般没啥用)
无序列表ul
定义列表:dl表示 definition list , dt 表示 definition title, dd 表示 definition description 定义表述词。

1
2
3
4
5
6
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dt>上海</dt>
<dd>魔都,有外滩,东方明珠塔</dd>
</dl>


北京

国家首都,政治文化中心

上海

魔都,有外滩,东方明珠塔


表达的语义有两层:

  1. 是一个列表
  2. 每一个列表项都有描述

定义列表用法非常灵活,可以一个

配很多

div和span都是容器标签

div和span都是容器标签
div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。
div表情是一个容器级标签,里面什么都能放,甚至可以放div自己

span也是表达”小区域,小跨度“的标签,但是是一个”文本级“的标签,也就是说span里面不能放p, h, ul, dl, ol, div
span里面是放置小元素的,div里面放置大东西的

所以,我们亲切的称呼这种模式叫做”div+css”, div标签负责布局,负责结构,负责分块。css负责样式。

表单

表单就是收集用户信息的,就是让用户填写,选择的

下拉列表

1
2
3
4
<select>
<option>北京</option>
<option>上海</option>
</select>

多行文本框(文本域)

1
<textarea cols="30" rows="10"></textarea>

三种按钮

  • 普通按钮
    1
    <input type="button" value="button上面显示的字">
  • 提交按钮
    1
    <input type="submit" value="默认有提交两个字">
  • 重置按钮
    1
    <input type="reset" value="重置按钮">

label 标签

1
2
<input type="radio" name="sex" id="nan"/> <label for="nan"></label>
<input type="radio" name="sex" id="nv"/> <label for="nv"></label>

label就是为了绑定某个标签(点击“男”这个字就可以选定单选框)
input元素要有一个id,然后label标签就有一个for属性,for的值和id值相同就可以绑定。

html废弃的标签

html中废弃了带有样式作用的标签,html本身不应该具有样式。

1
2
3
4
5
6
7
8
<h1>html中废弃的标签(这些标签有样式作用)</h1>
<font size="9" color="red">haha</font>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<hr/><!-- 水平线 -->
<br/><!-- 不另起一个段落换行,一般换行都是另起段落,所以用p代替 -->