HTML5(1)

标签

文档结构标签

<html>
<head>
<body>

文本格式标签

<title>
<hi>
<p> 段落
<pre> 标识预定义文本
<blockquote> 标识引用文本

##字符串格式标签

<b> 加粗
<i> 斜体
<sup> 上标
<sub> 下标
<cite> 引用效果

列表标签

<ul> unorder_list
<ol> order_list
<li> list
<dl> 定义列表
<dt> 标识词条
<dd> 标识解释

链接标签

<a> 超链接
<a href=''>

多媒体标签

<img src=''>

表格标签

<table> 定义表格结构
<caption> 表格标题
<th> table_header表格头部
<tr> table_row
<td> table_data
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="text/html" charset="UTF-8">
    <title>第一行代码</title>
</head>
<body>
    <table summary="这是一个summary这是一个summary这是一个summary这是一个summary这是一个summary这是一个summary这是一个summary这是一个summary">
    <caption>ascii字符集ascii字符集</caption>
    <tr>
        <th>十进制</th>
        <th>十六进制</th>
        <th>字符</th>
    </tr>
    <tr>
        <td>9</td>
        <td>9</td>
        <td>\n</td>
    </tr>
    <tr>
        <td>13</td>
        <td>d</td>
        <td>回车</td>
    </tr>

    </table>
</body>
</html>

在这里插入图片描述

表单标签

<form> 定义表单结构
<input> 定义文本域、按钮和复选
<textarea> 定义多行文本框
<select> 定义下拉列表
<option> 定义下拉列表的选择项目
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="text/html" charset="UTF-8">
    <title>第一行代码</title>
</head>
<body>
    <form>
        <p>账号:<input type="text"></p>
        <p>密码:<input type="password"></p>
        <p>多行文本域:<textarea></textarea></p>
        <p>复选框:
            复选框1<input type="checkbox" value="">
            复选框2<input type="checkbox" value="">
            复选框3<input type="checkbox" value="">
        </p>
        <p>单选按钮:
            <P>单选按钮1<input type="radio" value=""></P>
            <P>单选按钮2<input type="radio" value=""></P>
        </p>
        <p>
            下拉菜单:
            <select>
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
            </select>
        </p>
        <P><input type="submit"></P><!--这里不写按钮说明-->
        <P><input type="search"></P><!--这里不写按钮说明-->
    </form>
</body>
</html>

在这里插入图片描述

属性

基本属性

class
id
style

html, head, title, base, meta, param, script, style不包含基本属性

语言属性

lang   定义元素的语言代码或编码
dir	   定义文本的方向,包括ltr合rtl的取值,分表表示从左向右和从右向左

frameset, frame, iframe, br, base, param, script不包含语言语义属性

键盘属性

accesskey   定义访问某元素的快捷键
tabindex       定义元素的Tab键索引编号

accesskey实例

<a href="http://www.douban.com" accesskey="a">按住ALT+A可以跳转到豆瓣首页</a>
<!--彩蛋:喜欢看豆瓣的代码,还是发现了什么bug?不如和我们一起为豆瓣添砖加瓦吧!-->

tabindex实例

<a href="http://www.baidu.com" tabindex="1">百度</a>
    <a href="http://www.alibaba.com" tabindex="2">阿里巴巴</a>
    <a href="http://www.tencent.com" tabindex="3">腾讯</a>

在这里插入图片描述

内容属性

alt			定义元素的替换文本
title		定义元素的提示文本
longdesc	定义元素包含内容的大段描述信息
cite		定义元素包含内容的引用信息
datetime	定义元素包含内容的日期和时间

alt属性只能用在img, area, input元素(包括applet)中,对于input元素,alt属性用来替换提交按钮的图片

<a href="http://www.baidu.com" title="提示文本">百度</a>
<a href="http://www.baidu.com" alt='替换文本' title="提示文本">百度</a>

在这里插入图片描述






















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值