前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。
认识一个html文档的基本结构:
Here is titleHere is content.
HTML 文档是由** HTML 元素** 定义的,而HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
首先,HTML元素从闭合属性上可分为2类:
自闭和标签
自闭和标签在html元素中的比例不大,常用的就以下几个:
从上面的标签可以看出,自闭合标签形如: (建议:/和前面的标签名之间空一格)
- 手动闭合标签
html元素中大多数标签都是需要我们手动闭合的。
手动闭合的意义就是——告诉浏览器,我这个标签里的内容起始位置和结束位置。
常用的标签:
...#####下面着重介绍一些以后天天都会用到标签
- img
标签具体两个常用的属性:
src (source) 属性是必需的:它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径;
alt 属性是非必需的:它指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容;
(备注:我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-b5364a57e608df24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-baa2b72f113153e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- br
可插入一个简单的换行符。
注释:请使用
来输入空行,而不是分割段落。
- input
标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式:
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.文本框
value代表此文本框中显示的值,placeholder设置的值表示当value为空时,给用户的提示文字。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-aa905b77fd7ed49a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.密码框
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-1e87a670229cb326.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3.单选框
男
女
value:在界面上不会显示出来;
checked:如果存在,则表示默认选中;
name: 当多个的name属性值相同时,表示这多个单选框,同时只能有一个选中;
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-1e5e35cf2861dd16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4.复选框
足球
篮球
多个复选框的name即使相同,也可以同时选中;
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-7097ba4c2b4dcdcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-42eac9463e05b432.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- textarea元素
在这篇文章中,你可以对html元素有基本的了解。
标签定义多行的文本输入控件,上面介绍的是单行文本框。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-1c58c399783b0396.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- a标签
href属性是a链接必须的属性,代表你需要跳转的网页链接;
target属性有两个常用值:
target="_blank":表示在新的窗口打开页面;
target="_self"(默认值):表示在当前窗口打开;
title属性:当用户鼠标悬浮到链接上时,会出现一段提示文字,提示文字的内容为你设置的属性值;
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-7a5d89dd7022d94c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- select标签
请选择学院名称
风景园林学院
家具设计学院
林学院
艺术设计学院
信息科学与技术学院
元素可创建单选或多选菜单;
select元素中的标签用于定义列表中的可用选项。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-82766fe4a6b711ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-96071bd21321b02e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表格元素
姓名性别
abcdefg男殷晓飞男表格一般由多个子元素构成:
:最外层容器(可以通过设置border属性来控制表格边框);:表格头——用于包裹表格的顶部信息;
: 表格主题内容;表示一行记录;表示一列,但嵌套在tbody标签的tr标签内;也表示一列,但嵌套在thead标签的tr标签内;注意:
一个表格只有一个table标签;
一个table标签内只有一个thead和一个tbody;
一个thead内只有一个tr,thead中的tr中可以有多个th(可以有多列);
一个tbody中可以有多个tr(可以有多行记录),每个tr中可以有多个td(可以有多列);
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-99a6518b38b9b57a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-b59b79d93ad2623a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- button元素
提交按钮
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-0ae24d958cfa9219.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- label元素
Male
Female
标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-2ca56a9ba293220b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-2dd34d79e6a4838c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ul标签
- Coffee
- Tea
- Milk
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-41aac667827ef04c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ol标签
- Coffee
- Tea
- Milk
- 咖啡
- 牛奶
- 茶
- Coffee
- Tea
- Milk
ol上有以下几个常用属性:
start规定有序列表的起始值,默认为1。
type规定在列表中使用的标记类型。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-6ffe8311971c2361.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- dl标签
-
各个学院
- 风景园林学院
- 家具设计学院
- 林学院
- 艺术设计学院
- 信息科学与技术学院
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-ae3949d9d4043e10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- p标签
文章段落内容
标签具有确切的语义,用于定义段落。
- h1-h6标签
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
-
标签可定义标题。
定义最大的标题。
定义最小的标题。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-3eabf23efb824796.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- div标签
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-36e772d7c9db4fe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- span标签
殷晓飞 web前端 尽己力,听天命。
标签可以放在任何元素中,行内元素,多个span可以在同一行。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-66200ce98105e441.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- form标签
标签用于为用户输入创建 HTML 表单,在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。
#####快掌握这些基本的html元素,开始自己的前端学习之旅吧~