【前端基础篇】快速学习HTML常用标签和属性

一、前奏

  • 学习方法:
    整体原则:复习、学习、练习、预习
    网上找资料找练习作业、整理笔记、反复加强代码训练
  • 常用开发工具:
    Notepad++、Editplus、Hbuilder、IntelliJ IDEA、WebStorm
  • 常用的浏览器
    • IE: trident内核
      IE浏览器是世界上使用最广泛的浏览器,它由微软公公司开发,预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。目前最新的IE浏览器的版本是IE 11.
    • Firefox:gecko内核
      火狐浏览器是一个开源的浏览器,由Mozilla资金会和开源开发者一起开发。由于是开源的,所以它集成了很多小插件,开源拓展很多功能。发布于2002年,它也是世界上使用率前五的浏览器。
    • Safari:webkit内核
      Safari浏览器由苹果公司开发,它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中,从2003年首发测试以来到现在已经11个年头。是苹果系统的专属浏览器,当然现在其他的操作系统也能装Safari。
    • Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
      opera浏览器是由挪威一家软件公司开发,该浏览器创始于1995。目前其最新版本是opera 20.他有着快速小巧的特点,还有绿色版的,属于轻灵的浏览器。
    • Chrome:基于webkit
      Chrome浏览器由谷歌公司开发,测试版本在2008年发布。
      虽说是比较年轻的浏览器,但是却以良好的稳定性,快速,安全性获得使用者的亲睐。号称全世界用户体验最好的浏览器

二、html基础知识

2.1 对网页和网站的理解:

  • 什么是网页?
    网页就是在网站中的任何一页面,通常网页文件的扩展名为.html或.htm;(静态网页)
  • 网页的构成要素
    文字、图片、超链接、音频、视频等;
  • 什么是网站?
    网站是用于展示相关内容的网页的集合;访问网站时,默认打开的第一个页面就是主页,也叫首页。默认的文件名是index.html或default.html

2.2 web标准的介绍

  • WEB标准不是某一个标准,而是一系列标准的集合。
  • 网页主要由三部分组成:结构(Structure-html)、表现(Presentation-css)和行为(Behavior-javascript)。
  • 对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由万维网联盟(world wide web coalition,缩写:W3C)起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
    W3C 就是出 web 规范的组织机构。html、css、js的规范都是W3C定义发布的。

2.3 Html的发展历史

超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):

  • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
  • HTML 3.2——1997年1月14日,W3C推荐标准
  • HTML 4.0——1997年12月18日,W3C推荐标准
  • HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
  • HTML 5——2014年10月28日,W3C推荐标准

2.4 什么是Html?

Hyper Text Markup Language,超文本标记型语言,是一种标记语言,它是制作网页的基础语言,主要用于超文本中内容的显示方式。它不需要编译,可以直接由浏览器执行。

  • 超文本:
  • 标记:“标记”是一些符号,用来区分文档中的不同部分。也被称作“标签”
    • 单标记只有结束标记,如

      强制换行

      水平线
    • 双标记分为开始标记和结束标记,如

      ...

      (虽然不是所有的开始标签都必须有结束标签,但是建议最好有,使得网页更易于阅读和修改)
    • HTML标记不区分大小写,建议使用小写
    • 所有标签都是放在<>里
    • 标签可以互相合理嵌套
  • 语言:

2.5 文件和文件夹的命名规范

由字母、数字、下划线构成、且不以数字开头
不建议使用中文

2.6 Html标签的属性和属性值

属性:标签的特征
属性值:为标签的特征所赋的值
语法:<标记 属性名 = “属性值”> 内容

三、Html的嵌套原则

3.1 Html中元素的分类

块状元素block
内联元素(行内元素)inline
内联块状元素inline-block

3.2 块元素的三级分类

  • 一级元素
    body、head
  • 二级元素
    a.子一级元素必须是指定元素的二级元素
    • ul、ol子一级元素必须是li
    • dl:子一级元素必须是dt和dd
    • table:子一级元素必须是caption、thead、tbody、tfoot,再子一 级是tr,最后是td、th。
    • b.完全可以自由嵌套的元素 div、li、dd、form、td
  • 三级元素
    不可以自由嵌套的元素,该元素内部只能嵌套行内元素 h1-h6、p、dt

3.3 元素的嵌套原则

  • 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
    • 块级元素不能放在

      里面:

    • 有几个特殊的块级元素只能包含内联元素,不能再包含块级元素,这几个特殊的标签是:
      h1、h2、h3、h4、h5、h6、p、dt
    • li 内可以包含 div 标签 —— 这一条其实不必单独列出来的,但是网上许多人对此有些疑惑,就在这里略加说明:
      • li 和 div 标 签都是装载内容的容器,地位平等,没有级别之分(例如:h1、h2 这样森严的等级制度_),要知道,li 标签连它的父级 ul 或者是 ol 都 可以容纳的,为什么有人会觉得 li 偏偏容纳不下一个 div 呢?别把 li 看得那么小气嘛,别看 li 长得挺瘦小,其实 li 的胸襟很大 滴……
  • 块级元素与块级元素并列、内联元素与内联元素并列

四、Html基本元素及属性的介绍

4.1 Html基本结构的介绍

html head body

  • html 网页标签
  • head头部标签中可以嵌套网页标题标签 title 元信息标签 meta 样式标签style 链接外部样式标签link js标签script
  • body主体标签背景属性 bgcolor
  • meta元信息标签设置编码、文档描述、关键字、重定向等等(详见w3c)

4.2 标题标签及属性 h1-h6

语法: 标题标签 n代表1-6
属性: align 属性值: left center right
特点:h1-h6字体逐渐变大,默认加粗效果,独立占有一行(块状元素特点)

4.3 段落标签及属性 p

语法:

段落


属性: align 属性值: left center right justify(分散对齐)
特点:元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定

4.4 图像标记及属性 img

语法:
属性:

  • src 设置图片的路径(规定显示图像的 URL)
  • alt 图片加载失败的文字描述(规定图像的替代文本)
  • title 图片的描述信息(鼠标放在上面,增加用户体验)
  • width、height 设置图片的宽高
  • border 设置图片的边框

注意:可插入的图片类型 :jpg、gif、png 不能插入的类型:psd、ai、bmp

路径:指定文件或文件夹所在的位置,路径分为绝对路径和相对路径;
绝对路径:完整的描述文件位置的路径就是绝对路径(带盘符),例如:F:\厦门\素材\其他\1.jpg
相对路径:文件本身相对于目标所在位置

  • 网页文件和图片位于同一个文件夹下:直接写图片名,如src=“1.png”
  • 网页文件和图片不在同一个文件夹下,图片位于另外一个文件夹里面:先写图片文件夹的名,再写文件名,如src=“img/1.png"
  • 网页文件和图片不在同一个文件夹下,网页文件位于另外一个文件夹里面:先使网页文件跳出文件夹,再写文件名,如src=“…/img/1.png”

4.5 超链接标签 a

属性

4.6 水平线标记以及属性 hr

语法:



属性:\

  • size 水平线的厚度
  • width 水平线的宽度
  • color 水平线的颜色
  • align 水平线对齐方式,属性值 left center right

4.7 其它常用标签的介绍(了解)


强制换行(Shift+Enter)
上标
下标
标签(加粗)
标签(加强调,效果加粗)
标签(斜体)
标签(作用强调,效果斜体)
标签(下划线)

4.8 HTML里面常用的特殊符号(详见附件)

  空格
© 版权符号
> 大于号
< 小于号
&trade 商标
® 已注册

4.9 颜色的表示方式

  • 英文单词表示法(详见资料):red green blue black orange yellow pink brown purple white gray gold
  • 十六进制表示法:#6位16进制数(0-9,a-f)
    #ff0000 红色 #00ff00 绿 #ffff00 黄 #000000 黑色 #ffffff白色
  • RGB表示法:
    • 0-255之间的值 rgb(255,120,0)
    • 所占百分比设置 rgb(10%,0%,100%)
    • 带有透明度的颜色设置(rgba表示法):a表示不透明度 , 取值范围是0-1之间(在IE上测试浏览器兼容性),0代表完全透明 rgba(255,0,0,0.5)

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址

五、列表

5.1 无序列表 ul(unordered list)-li(list item)

属性:type 属性值:disc circle square

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

5.2 有序列表ol(ordered list)-li(list item)

type = 1 | a | A | i | I 列表类型
reversed 倒序
start = 数字 从第几个开始

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

5.3 自定义列表dl(definition list)

定义项1
描述项11
描述项12
描述项1n
定义项m
描述项m1
描述项m2
描述项2n

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址

六、表格 table

<table>
	<caption></caption>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tfoot>
		<th span="4"></th>
	</tfoot>
</table>

6.1 table 属性

  • border 设置表格的边框
  • bordercolor 设置表格边框的颜色
  • height、width
  • bgcolor、background
  • cellspacing 设置表格边框与边框之间的距离
  • cellpadding 设置表格内容与边框的距离
  • summary 设置描述信息,便于搜索引擎的准确快速的搜索到此表格
  • align 设置表格的整体水平对齐方式

6.1 caption

表格自带的标题标签,标准规定只能添加一个标题,且caption标签只能写在table起始标签的后面;但是谷歌浏览器写多个caption标签也可以显示

6.2 分割区域

  • thead
  • tfoot
  • tbody

注意使用顺序
thead标签定义表格的表头。该标签用于组合HTML表格的表头内容;thead元素应该与tbody和tfoot元素结合起来使用。tbody元素用于对 HTML表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素,它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签

6.3 tr

每个表格中有几对tr标签,就代表这个表格有几行

  • height、bgcolor、background
  • align 设置文本的水平对齐方式
  • valign 设置文本的垂直对齐方式

6.4 td(th)

每一行中有几对td就代表这一行有几个单元格

  • height、width、bgcolor、background、align、valign
  • colspan 列合并,左右单元格进行合并,属性值是数字
  • rowspan 行合并,上下单元格进行合并,属性值是数字

6.5 添加标题的方式

  • 使用标题标签
  • 使用caption标签

七、表单form

表单是用来收集用户数据并将其提交到相应的地址

7.1 form 属性

  • action 数据提交地址
  • method 数据提交方式 get 和 post提交两种
    get和post区别:
    get提交地址栏:file:///F:/P1阶段课件/H1805A班/20180628/表单/think.php?username=张三&password=12345&sex=male&com-lan=C%2B%2B&com-lan=Js
    post提交地址栏:file:///F:/P1阶段课件/H1805A班/20180628/表单/think.php
    get提交安全性比较低,传输数据比较小,效率高,链接可分享
    post提交与之相反
  • target 页面打开方式

7.2 控件input中元素(type属性值)

  • text 文本输入框
  • password 密码输入框
    • placeholder 设置文本提示信息
    • autofocus 自动获取焦点
    • disabled 禁用
    • readonly 只读
  • radio 单选框
  • checkbox 复选框
    • checked 设置默认被选中
      注意:name值要一致,这样才能保证选项是同一个题干下面的
  • 日期和时间 date month week time datetime-local
  • color 颜色域
  • number 数字
    • step
  • file 文件域
  • image 图像域
    • src 添加图片路径
      提示:图像域具有和submit相同的提交功能
  • range 进度条
    • max
    • value
  • tel 电话
    • maxlength 设置最大长度
  • email 邮箱
    这里,email具有自动验证的功能,包含@
  • url 网址
    这里,url具有自动验证的功能,符合http:// 或者 https:// 这两种协议
  • search 搜索
  • button 普通按钮
  • submit 提交按钮
  • reset 重置按钮

7.3 控件textarea 文本域,多行文本框

  • cols 列宽(文本域的宽度)
  • rows 行高(文本域的高度)

7.4 控件select 下拉菜单

  • select-option语法:
<select name="" multiple size="2">
	<option value="">菜单项1</option>
	<option selected value="">菜单项2</option>
		...
	<option value="">菜单项n</option>
</select>
  • selected 默认被选中的菜单项
  • multiple 设置可以被多选
  • size 设置显示的项数

7.5 控件与表单进行关联的方式

  • 控件在表单内
  • 控件在表单外 控件的form属性与表单form标签的属性id值一致

7.6 label标签

向控件定义标注(标记)。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

7.7 label标签与控件的关联方式

  • 控件在label标签内
  • 控件在label标签外 label标签的for属性需要和所关联控件的id属性值一致

7.8 拓展

  • fieldset 元素可将表单内的相关元素分组。
  • legend 元素为 fieldset 元素定义标题(同:caption)

你可能感兴趣的:(HTML5,前端开发,前端,html,标签)