标签这一波我学了三天,把记得笔记整理一下。
一、HTML的版本
- HTML 4.01
- XHTML
- HTML 5
- HTML 5.1
他们规定的区别主要在于:
- 文档的开头声明不一样,HTML的比较简单好记。
<!DOCTYPE html> <html> <head></head> <body></body> </html>
- 规定的标签不一样,有些继承下来了,有一些被淘汰掉了。
HTML只是写出页面的内容,只是内容,页面的样式由css决定。但要注意标签的语义化。
如果想查询html的标签,可以去MDN官方网站查询(需要FQ)
中国的W3school也不错
二、常用标签
标签元素分为 块级元素(block-level element) and 内联元素(inline element)
强制切换 display:block/inline
<a>
跳转链接
<img>
图片标签 <img src="URL.png" alt="图片">
alt表示在图片 加载失败 后显示的文字
<hr>
水平分割线
<br>
强行分行
<dl>
描述列表
<dl> 描述列表
<dt>名字</dt> <dd>定义</dd>
<dt>名字</dt> <dd>定义</dd>
</dl>
<title>
网页的标题
<nav>
导航条/栏
<ul> / <ol>
无序列表 / 有序列表 元素中每一项用<li>
来表示
<div>
划分区域的元素;无意义;用的时候最好用class属性来标注;块级元素
<main>
网页独一无二的主体部分;
<footer>
页脚;也可用于<div>
中,称之为“div脚”
<strong>
文档中重要的部分
<bold>
简单的加粗,无语义上的意思
<input>
可交互控件
<iframe>
内联框架元素
< !-- 注释 -->
注释
<section>
章节
<select>
下拉列表
<select name="group"> / 列表起名字
<option value=""> </option> / 空的列表
<option value="1">列表一</option> / 命名是1
<option value="2">列表二</option> / 命名是2
<option value="3" disabled>列表三</option> / disabled表示不许选择
<option value="4" selected>列表四</option> / selected 默认选择这个
三、<a>、<form>、<input>的用法
-
<a>标签的用法
-
<a href="URL">xxx</a>
常规用法 点击xxx跳转到URL
-
<a href="//qq.com">QQ</a>
无协议写法,浏览器自动补全。 -
<a href="/xxx.html">xxx</a>
跳转路径 -
<a href="#top">跳转顶部</a>
跳转到页面顶部 -
<a href="JS代码"></a>
点击直接执行js代码
(<a href="jacascript:;"</a>
点击后什么都不做)
-
-
<form>标签
表示了文档中 的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
如果<form>
标签中没有<input>
submit按钮/<button>
,就无法提交。
<form action="" method="get"> / get类型,提交数据
<input type="text" name="username"> /控件类型是文本,名字是用户名
<input type="password" name="password"> /控件类型是密码,名字是密码
<input type="submit" value="提交"> /控件类型是submit按钮,点击时,表单提交。
</form>
在 form表单 提交的时候也有 target属性 ,效果和<a>中是一样的。
-
<input>标签
空元素;可交互控件;
- checkbox 多选框
- radio 单选框
- submit 提交按钮
- button 单纯的按钮
- text 文本框
- password 密码框
在选择的时候点击文字进行选择 <label><input type=checkbox>选项文字</label>