认识html元素_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了认识html元素_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6674字,纯文字阅读大概需要10分钟。
内容图文
![认识html元素_html/css_WEB-ITnose](/upload/InfoBanner/zyjiaocheng/409/e69548359ebe45ba833fb857227f493c.jpg)
认识一个html文档的基本结构:前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。
Here is title Here is content.
HTML 文档是由 HTML 元素 定义的,而HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
- 首先,HTML元素从闭合属性上可分为2类:
- 自闭和标签
自闭和标签在html元素中的比例不大,常用的就以下几个:
从上面的标签可以看出,自闭合标签形如: <标签名>标签名>(建议:/和前面的标签名之间空一格) - 手动闭合标签
html元素中大多数标签都是需要我们手动闭合的。手动闭合的意义就是——告诉浏览器,我这个标签里的内容起始位置和结束位置。常用的标签:...
- 自闭和标签
- img
标签具体两个常用的属性:src (source) 属性是必需的:它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径;alt 属性是非必需的:它指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容;(备注:我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。)
Paste_Image.png
Paste_Image.png
br
可插入一个简单的换行符。注释:请使用
来输入空行,而不是分割段落。input
标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式:输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.文本框
value代表此文本框中显示的值,placeholder设置的值表示当value为空时,给用户的提示文字。
Paste_Image.png
2.密码框
Paste_Image.png
3.单选框
男 女value:在界面上不会显示出来;checked:如果存在,则表示默认选中;name: 当多个的name属性值相同时,表示这多个单选框,同时只能有一个选中;
Paste_Image.png
4.复选框
足球 篮球多个复选框的name即使相同,也可以同时选中;
Paste_Image.png
Paste_Image.png
- textarea元素
Paste_Image.png
- a标签
我的个人网站
href属性是a链接必须的属性,代表你需要跳转的网页链接;target属性有两个常用值:target="_blank":表示在新的窗口打开页面;target="_self"(默认值):表示在当前窗口打开;title属性:当用户鼠标悬浮到链接上时,会出现一段提示文字,提示文字的内容为你设置的属性值;
Paste_Image.png
- select标签
元素可创建单选或多选菜单;select元素中的标签用于定义列表中的可用选项。
Paste_Image.png
Paste_Image.png
- 表格元素
姓名 性别 abcdefg 男 殷晓飞 男 :最外层容器(可以通过设置border属性来控制表格边框);:表格头——用于包裹表格的顶部信息;: 表格主题内容;
表示一行记录; 表示一列,但嵌套在tbody标签的tr标签内; 也表示一列,但嵌套在thead标签的tr标签内;注意:一个表格只有一个table标签;一个table标签内只有一个thead和一个tbody;一个thead内只有一个tr,thead中的tr中可以有多个th(可以有多列);一个tbody中可以有多个tr(可以有多行记录),每个tr中可以有多个td(可以有多列);
Paste_Image.png
Paste_Image.png
- button元素
Paste_Image.png
- label元素
Paste_Image.png
Paste_Image.png
- ul标签
- Coffee
- Tea
- Milk
Paste_Image.png
- ol标签
- Coffee
- Tea
- Milk
- 咖啡
- 牛奶
- 茶
- Coffee
- Tea
- Milk
Paste_Image.png
- dl标签
- 各个学院
- 风景园林学院
- 家具设计学院
- 林学院
- 艺术设计学院
- 信息科学与技术学院
- 标签定义了定义列表(definition list)。
- 标签用于结合dt(定义列表中的项目)和 dd (描述列表中的项目)。
Paste_Image.png
p标签
文章段落内容
标签具有确切的语义,用于定义段落。
h1-h6标签
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
-
标签可定义标题。
定义最大的标题。
定义最小的标题。由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。
Paste_Image.png
- div标签这里面可以只放文本,也可以放其他任何标签,当然可以放自己
News headline 1
some text. some text. some text...
这是链接可定义文档中的分区或节(division/section),用于网站布局,块状分隔。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。Paste_Image.png
- span标签
殷晓飞 web前端 尽己力,听天命。
标签可以放在任何元素中,行内元素,多个span可以在同一行。
Paste_Image.png
- form标签
html代码热搜
- a标签的背景图在ie8下不显示问题的解决方法
- disabled与readonly的作用及区别介绍
- 详解HTML的<input>标签及其禁用方法
- 使用vertical-align实现input和img对齐
- 使用HTML编写简单的邮件模版
- HTML中Li标签的使用示例
- 关于type="file"的input框样式修改小结
- HTMLcellpadding与cellspacing属性图文详解
- 详解HTML编程的标记与文档结构
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- 在网页上调用桌面exe程序的简单方法
- html借助marquee实现文字左右滚动
- 关于分割线hr在各浏览器中的差异
- a标签的target链接指向iframe的方法
- 使用overflow:hidden来禁用页面滚动条
- 使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
- 如何使用图片按钮作为重置(reset)表单按钮
- 超链接的宽度和高度直接设置不起作用的解决方法
- textarea的disabled与readonly属性具体用法介绍
- 空格在Html中如何表示( 有什么含义)
- 在js或css后加?v=版本号不让浏览器缓存
- 块级元素和内联元素及可变元素汇总
- HTML的结束标签问题与w3c标准
- iframe框架在IE浏览器下将白色背景设为透明色
- AdobeBrackets简单使用图文教程
- span标签