认识html元素_html/css_WEB-ITnose

前端现在越来越火，可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础，但是想转到前端的人”一点帮助。

认识一个html文档的基本结构：

    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元素

  在这篇文章中，你可以对html元素有基本的了解。 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

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元素

  Male
  Female 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。

Paste_Image.png

Paste_Image.png

• ul标签
  • Coffee
  • Tea
  • Milk
  标签定义无序列表。

Paste_Image.png

• ol标签

  
  Coffee
  Tea
  Milk
  
  咖啡
  牛奶
  茶
  
  Coffee
  Tea
  Milk
  标签定义有序列表。ol上有以下几个常用属性：start规定有序列表的起始值，默认为1。type规定在列表中使用的标记类型。

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 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。
     
   快掌握这些基本的html元素，开始自己的前端学习之旅吧~
  声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。
  
  相关文章
  相关视频
  
  
  
  html下拉菜单文字怎么变小
  
  
  HTML里怎么设置thead表头的颜色
  
  
  html5中元素能拉伸宽度吗
  
  
  html中怎么清除li黑点
  
  
  认识html元素_html/css_WEB-ITn...
  
  
  
  
  接口与抽象类01
  
  
  类的composer自动加载机制
  
  
  composer原理与常用命令03
  
  
  composer原理与常用命令02
  
  
  
  
  网友评论
  文明上网理性发言，请遵守 新闻评论服务协议
  我要评论
  
  
  
  
  
  
  立即提交
  
  
  
  专题推荐
  
  
  独孤九贱-php全栈开发教程
  全栈  170W+
  主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门
  
  
  玉女心经-web前端开发教程
  入门  80W+
  主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门
  
  
  天龙八部-实战开发教程
  实战  120W+
  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习