一丶什么是HTML?
当今社会,网页技术日新月异,目前网页大都运行HTML超文本标记语言(Hyper Text Markup Language),HTML是搭建网页的基础语言,
简单来说就是浏览器识别这一语言规则,这一规则由W3C制定.
背景介绍
1.HTML的英文全称是Hyper Text Markup Language,它是网页超文本标记语言,也是全球广域网上描述网页内容和外观的标准.
2.HTML不是一款编程语言,而是一款描述性的标记语言,用于描述超文本内容的显示方式.
HTML的概念
HTML作为一款标记语言,本身不能显示在浏览器中.标记语言经过浏览器的编辑和解释,才能正确的反应HTML标记语言的内容.
HTML简介
最基本语法是:<标记符>内容</标记符>
最基本结构是:
<!DOCTYPE html>声明一个HTML文档
<html>文件开始标记
<head>文件头开始标记
</head>
<body>文件主体开始标记
</body>
</html>
最基本的语法和结构

 二丶HTML常用基本元素

注:大多数元素都有id丶class丶style属性

 

1.基本元素

(1)注释:<!--注释内容-->

(2)声明:<!DOCTYPE html>

(3)文档根元素:<html>

(4)文档页面头部分:<head>

(5)头部信息:<title>文档标题丶<script>脚本丶<style>样式丶<link>外部样式链接丶<base>页面基本属性

(6)文档元信息<meta>

(7)文档主体部分<body>

(8)引入样式:<sytle>

(9)引入脚本:<stript>

(10)定义标题<h1>到<h6>

(11)定义段落:<p>

(12)定义块级元素(文档中的节):<div>(默认换行),<span>(不会换行)

(13)定义连接:<a href="链接的资源地址(可以绝对或相对路径)" media="指定链接引用的媒体类型" target="指定哪个框架装载_self(自身)丶_blank(新窗口)丶_top(顶层框架)丶_parent(父框架)">

 (14)定义图像:<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

(14.1)定义图像映射:<map>

(15)定义换行:<br>

(16)定义水平线:<hr>

(17)定义表格:<table>

(18)定义表单:<form>

 

 

2.语义相关元素

(1)表示一个缩写:<abbr>,属性titile

(2)代表一个地址:<address>

(3)定义一段长的引用文本:<blockquote>

(4)代表作品的标题(浏览器常用斜体表示):<cite>

(5)定义一段引用文本(带引号):<q>

(6)代表计算机代码:<code>

(7)代表专业术语:<dfn>

(8) 定义删除文本:<del>

(9)定义插入文本:<ins>

(10)预格式化(保留原文本空格丶换行丶TAB):pre

(11)定义范文本内容:<samp>

(12)定义键盘文本:<kbd>

(13)表示一个变量:<var>

 

3.列表相关元素

(1)定义无序列表<ul>

(2)定义有序列表<ol>

(3)定义列表项目<li>

(4)自定义列表<dl>

(5)自定义列表标题<dt>

(6)定义列表普通项<dd>

 

4.表格相关元素

(1)定义一个表格<table cellpadding="定义单元格边框的间距" cellspacing="定义单元格之间的间距">

(2)定义一个标题<caption>

(3)定义表格的行<tr>

(4)定义单元格<td>

(5)定义表格页眉<th>

(6)定义表格主体<tbody>

(7)定义表格头<thead>

(8)定义表格脚<tfoot>

 

5.框架相关元素

(1)定义一个内连框架<iframe src="地址" width height>

 

三丶通用属性

(1)允许设定编辑内容:contentEditable="true"

(2)是否显示组件属性:hidden=false|true

(3)对用户输入的文本进行检查:spellcheck=false|true

 

四丶常用元素

(1)引用独立的文章<article>

(2)对页面内容进行分块<section>

(3)定义导航条<nav>

(4)定义当前页面副属信息<aside>

(5)定义重点:<mark>

(6)定义被标注内容是日期丶时间<time>

 

五丶功能性元素

(1)表示最大值最小值的仪表盘<meter value当前值 min最小值 max最大值 low范围最小 hight范围最大 optimum有效范围最佳值>

(2)表示一个进度条:<progress max完成进度值 value当前进度>

六丶HTML表单
1.表单元素
(1)<form action指定提交地址 method指定请求方式 enctype指定编码 name表单名称 target那种方式打开URL>
(2)输入控件<input>type=text文本|password密码|hidden隐藏|radio单选|checkbox多选|image图片域|file文件上传域|submit提交|reset重设|button无动作按钮
(3)定义标签<label>用于说明输入内容信息
(4)定义按钮<button disanbled指定是否禁用此按钮 name唯一名称与id一致 type=button丶reset丶submit value=初始值 >
(5)定义下拉菜单<select>必须和定义菜单选项<option>结合使用
(6)定义文本域<textarea cols宽度 rows高度 disabled是否禁用 redonly是否只读>用于生成多行文本域
(7)用于输出结果的显示<output>
(8)checkValidity来校验返回T或者F

七丶校验属性
(1)表单内容必须填写required
(2)表单符合指定的正则表达式required pattern=""
(3)在数值之间的数字并且step是步长:min丶max丶step





posted on 2018-04-24 17:00  仓鼠大人爱吃肉  阅读(81)  评论(0)    收藏  举报