HTML5基础

来源：互联网发布：淘宝购买怪兽伊兰特编辑：程序博客网时间：2024/06/05 23:11

HTML5基础

1. meta标签的用法

meta标签永远位于head元素的内部
元数据总是以名称/值的形式被成对传递的

必须属性

content(定义与http-equiv或name属性相关的元信息)：
值：some_text，

可选属性

http-equiv（把content属性关联到HTTP的头部，标题信息）：
值:content-type,expires,refresh,set-cookie
name（把content属性关联到一个名称，页面信息）：
值：author,description,keywords(为文档定义了一组关键字，某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类),generator,revised,others
scheme（定义用于翻译content属性值的格式）：
值：some_text
meta标签详解
设定当前网页的编码格式
<meta charset = "UTF-8">
作者署名
<meta name = "author" content = "李白">
网页分类关键字
<meta name = "keywords" content = "HTML,ASP,PHP,SQL">
页面描述
<meta name = "description" content= "免费在线教程">

2. 标签演示

见下

3. 尝试

锚点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <b>定义加粗的标签</b><br>    <i>定义斜体文本</i><br>    <big>定义大号文本</big><br>    <small>定义小号文本</small><br>    <sup>上标文本</sup><br>    <sub>下标文本</sub><br>    <bdo dir="ltr">定义文本显示方向</bdo><br>    <a href="#down">点击跳转到网页底部</a>    <div style="height: 2000px;"></div>    <a href="" name="down">这里是底部</a></body></html>

图片代码

<!DOCTYPE html><html lang="en">    <head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <h1>锚点</h1>    <br>    <a href="homework2.html#down">点击跳转到作业题2的底部</a><br>    <a href="#bottom">跳转到网页底部</a><br>    <a href="https://sh.nuomi.com#footer">跳转到糯米网底部</a><br>    <div style="height: 2000px;">    <img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">        <map name="test-demo" id="test-demo">    <!-- shape 形状   coords 坐标  href 链接  -->        <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">        <area shape="circle" coords="200,200,100" href="http://www.baidu.com" alt="">        <!-- <area shape="poly" coords="200,200,100"    href="http://www.baidu.com" alt=""> -->        </map>    </div>    <a href="" name="bottom">这里是网页底部</a><br></body></html>

4. 常用标签

带有语义的标签

hr，表示换行，并且加一条分割线上
br，表示换行
h1~h6，表示多级标题
em，表示强调
strong，表示比em强调级别更高
abbr，定义为缩写，与title属性相互搭配使用
address，定义地址元素
blockquote，定义块引用，通常情况下会产生缩进
cite，通常情况下，某段话引子某本书，可以使用cite进行说明
ins ，定义被插入文本
del，定义被删除文本

带有一定样式的标签（此类标签同时带有语义）

b，定义粗体文本
i，定义斜体文本
big，定义大号文本
small，定义小号字体文本
sup，上标文本
sub，下标文本
bdo，定义显示文本方向，属性：dir；属性值：ltr，rtl

输出类的标签

pre，代码中样式原样输出
code，定义计算机代码文本
kbd，定义键盘文本
var，定义变量

5. 功能类标签

a 标签

定义超链接实现页面跳转
定义锚点实现书签功能
如果a标签的href属性值为空，那么这个a标签就会变成一个隐藏的锚点，看似href属性什么都没有，但是点击之后会跳转到网页的顶部

列表

无需列表：ul，li
有序列表：ol，li

去掉有序和无需列表前的标号
<style> ul,ol{ list-sytle:none; } </style>

页面嵌套

iframe

项目列表描述

<dl>    <dt>        <dd>        </dd>    </dt></dl>

图片

img：
a : 1. 常用属性：alt，图像代替文本；2. wight， height；3. ismap，定义图像映射的一张图像；
b : 1. 通过img实现图像映射，map，定义图像映射；
2. area，定义图像映射内部的区域
c：链接跳转的图像，将图像嵌套在a标签中

表格，table标签

表格标题caption标签
表格页眉th标签
表格的行tr
表格的单元格td
表格的头部thead
表格的主干tbody
表格的尾部tfoot

页面所有链接的基础链接

base标签
base标签位于head标签的内部
在标签内部的路径不是http开头的时候，则在路径前加上base标签的网络连接，连接分为2种：http和file类型；
网页中所有连接的基础链接,base标签里面的链接会影响页面中的所有的链接，除非链接设置了协议。

form表单

作用：登陆或者注册、上传….
输入用户名和密码

form标签中常用的属性

action 属性

设置将表单中的数据提交给谁
如果action的属性值为空，那么当你点击提交的时候数据就提交到了当前的网页中，不为空时提交到指定的网页。

method 属性

方法设置提交给后台的方法 get / post
当method属性值为get的时候，数据被通过url(统一资源定位符)传递到后台当中
当属性值为post的时候，传输数据通过服务器来传输。
当method属性值为空的时候，默认属性值为get。

form表单组成之一 input

input 中 type 属性

text 文本类型
password 密码
submit 提交
file 文件
hidden 隐藏
radio 单选
checkbox 多选
image 看似是图片，但其实是一个提交按钮
reset 重置

阅读全文

0 0