400-700-1307

【Html5基础教程】html常规标签总结

2019-01-29 15:06

html中的标签: 
超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。 
html标签的大小写无关的,推荐使用小写。 
特点:

  1. 由尖括号包围的关键词,通常是成对出现的,比如<div>和</div>
  2. 标签对中的第一个标签是开始标签,第二个标签是结束标签; 开始和结束标签也被称为开放标签和闭合标签。 也有单独呈现的标签,如:<img src="123.jpg" />等
  3. 一般成对出现的标签,其内容在两个标签中间。单独呈现的标签,则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />
  4. 网页的内容需在<html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中,而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示,但是作为职业素养,还是应该养成正规编写习惯

常用标签和特点:

  1. html超文本标记语言 – 所有网页标签的一个容器
  2. head定义了网页(文档)的信息,(不会显示在游览器窗口)
  3. meta 定义了html文档中的元数据,网页的元信息(charset=utf-8指网页内容的编码类型,国际编码)

gbk2312 中文编码类型

  1. title 定义了文档的标题
  2. body网页的主体内容区域(游览器窗口中显示的内容)
  3. div 俗称为盒子,division(分割)。特点: 默认高度为0,宽度相对于父级盒子是100%;独立成行,垂直显示(默认垂直布局)。结构:包含关系 = 父子结构;同级关系 = 兄弟结构
  4. img图片标签:(单闭合标记)。<img src=”图片路径” />;title=”鼠标悬停时显示的文字”;alt=”图片路径发生错误时,给用户的友好提示”;特性:前景图占位,不会平铺,位置是放在body结构中的。

  5. 换行标签
  6. h1~h6 标题标签。<h1>标题文字</h1> 特征:级别由高到低,h1~h6,一般页面中h1只使用一次,因为要分清主次关系。自带加粗,字体大小,外间距,且是块级元素。独立成行,具有div的全部特征。
  7. p段落标签 <p>段落文本</p> 特征:具有div的全部特征,自带外间距
  8. ul无序列表

语法格式:

1 <ul>
2
3 <li>子项</li>
4 <li>子项</li>
5 <li>子项`</li>
6
7
8
9 </ul>

ol有序列表 
语法:
1 <ol>
2 <li>子项</li>
3 <li>子项</li>
4 <li>子项</li>
5 </ol>

特征:ul,ol具有div的全部特征,自带列表符、外间距、内填充。 
去掉列表符样式 ul{ list-style:none; }

  1. 万能标签<span></span> 行级元素
  2. a标签 – 超链接标签

格式:href=”跳转网址”>文字内容或者图片
特征:自带蓝色,下划线,访问后会变为紫色,如果为空链接,可以用#占位 
注意:标签自带的样式特征是无法父级改变的(例如a的颜色和下划线) 
新窗口打开:target=“_blank

  1. 定义列表:dl(块级元素,其中dl,dd自带外间距)

1<dl>
2<dt>标题</dt>
3<dd>子列表项</dd>
4<dd>子列表项</dd>
5<dd>子列表项</dd>
6</dl>

特点:自带外间距,一个dl里面可以有多个dt和dd;

  1. 邮件链接:href=”mailto:123@qq.com”>发送邮件

可以调用本地邮件系统

  1. 锚点技术:实现单页面间的跳转

第一种方法: 
1、 下锚(做记号)跳转的目标位置 
2、 在导航上,写上 
第二种方法: 
1、 下锚(做记号)<div id=”自定义锚点名”></div> 
2、 在导航上,写上

  1. form表单标签 – 相当于表单控件的容器

格式:<input type=”类型”/> 
文本框:type=“text” name=”标识名” value=“默认值” placeholder=”默认名/值” 
密码框:type=“password” name=“标识名” 
name属性规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript引用表单数据。 
单选框:type=”radio”name=”起一个统一的名字,实现单选” 
checked=”checked”(默认被选中的) 
多选框:type=”checkbox” checked=”checked”(默认被选中的) 
下拉列表:

1 <select>
2 <option>子项</option>
3 <option>子项</option>
4 <option>子项</option>
5 </select>

 
selected=”selected” 默认选择
文本域:<textarea>实现多行文本的</textarea>
按钮:
 单纯的按钮: type=“button” value=“改写或重置文字的”
 提交按钮:type=”submit” value=“改写或重置文字的”
 重置按钮:type=“reset” value=“改写或重置文字的”

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号