一.HTML的属性

1.1基本属性

1.1.1三个基本属性

class    　　　　定义类规则或者样式规则

id 　　　　　　  定义元素的唯一标识

stype　　　　　定义元素的样式声明

1.1.2不含三个基本属性的元素

html、head 　　 文档和头部信息基本结构

title　　　　　　网页标题

base　　　　　  网页的基准信息

meta　　　　　 网页元信息

param　　　　  元素参数信息

stype、script　  网页的脚本信息和样式

1.2语言属性

1.2.1两个属性

lang 　　　　　定义元素的语言代码或者编码

dir　　　　　　定义文本的方向

1.2.2不含语言属性的元素

iframe、frameset、frame　　　　　　网页框架架构

br　　　　　　　　　　　　　　　　 换行标识

hr　　　　　　　　　　　　　　　　 结构装饰线

base　　　　　　　　　　　　　　　网页基准信息

param　　　　　　　　　　　　　　 元素参数信息

script　　　　　　　　　　　　　　   网页的脚本

列子：

<html dir="rtl" xml:lang="zh-CN">

    <head>

        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>标题在head标签中</title>

    </head>

    <body id="myid" lang="zh-CN">

        <h1>大标题</h1>

        <p><big>真香！！！</big></p>

        <p>真香</p>

    </body>

</html>

效果：

1.3键盘属性

accesskey　　　　　　定义访问某一个元素的快捷键

tabindex　　　　　　　定义tab键的索引编号

列子：

<html>

    <head>

        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>tab键测试</title>

    </head>

        <from id="from1" name="from1" method="post" action="">

            <!--放在表格里-->

            <p><a  tabindex="1">输入你的账号<input type="text" name="text1" id="text1"/></a></p>

            <p>输入你的密码<input type="password" name="password1" id="password1"/></p>

            <p><a tabindex="2">你是一个有梦想的人吗？ 是的<input name="checkbox1" type="checkbox"  id="checkbox1" value="1"/></a>

                <a tabindex="3">怎么会不是呢？<input name="checkbox2" type="checkbox" id="checkbox2" value="2"/></a>

            </p>

            <p>你是小天才吗？

                <input name="button1" type="radio" value="1"/>不是

                <input name="button1" type="radio" value="1"/>第二个不是

            </p>

        </from>

</html>

效果：

现在他的tab键的索引是按照你定义的顺序来进行的

1.4内容属性

1.4.1五个内容属性

alt   　　　　　　定义元素的替换文本

title　　　　　　 定义元素的提示文本

longdese　　　   定义元素包含的内容的大段描述信息

cite 　　　　　　 定义元素引用的信息

datetime　　　　 定义元素包含内容的时间

列子：

<html>

    <head>

        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

        <title>内容属性</title>

    </head>

    <body>

        <p><a title="当你的鼠标移动到这个元素上面的时候就会出现一个提示文本">把鼠标移动到这里</a></p>

    </body>

</html>

效果：

1.4.2title属性不能运用的元素

html head title base basefont meta param script这几个属性不能使用title属性

小白学习前端---第二天 HTML的基本属性————1的更多相关文章

  1. 小白学习前端---第一天 了解HTML

    一.HTML的结构 1.1 html文档主要包含两个部分:头区域和实体区域. 1.2 html的三个主要标签:<html>.<head>.<body>.<ht ...

  2. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  3. 小白学习django第二站-模版配置

    上一站说道app创建,接下来我们来配置app的url路由 首先需要到setting.py中添加book这个app, 再到django_test文件里的urls添加路由 include() : 这个函数 ...

  4. 学习前端第二天心得体会（初步了解HTML5的部分API以及画布Canvas）

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

  5. 小白学习tornado第二站-tornado简单介绍

    tornado基本web应用结构 分为两大块类 Application对象(只会实例化一次) 路由表URl映射 (r'/', MainHandler) 关键词参数settings RequestHan ...

  6. 小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  7. 偏前端--之小白学习本地存储与cookie

    百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...

  8. iOS开发如何学习前端(2)

    iOS开发如何学习前端(2) 上一篇成果如下. 实现的效果如下. 实现了一个横放的<ul>,也既iOS中的UITableView. 实现了当鼠标移动到列表中的某一个<li>,也 ...

  9. iOS开发如何学习前端(1)

    iOS开发如何学习前端(1) 我为何学前端?因为无聊. 概念 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或 ...

随机推荐

  1. Kali Day01 --- arpspoof命令进行断网攻击（ARP欺骗）

    root@kali:~/文档# arpspoof -i eth0 -t 172.20.151.* 172.20.151.1 34:64:a9:36:4:b7 0:0:0:0:0:0 0806 42: ...

  2. VS2013的x86汇编语言开发环境配置

    转载:https://blog.csdn.net/infoworld/article/details/45085415 转载:https://blog.csdn.net/u014792304/arti ...

  3. Learning-MySQL【5】：数据的操作管理

    一.插入数据 1.为表的所有字段插入数据 通常情况下,插入的新纪录要包含表的所有字段 INSERT 语句有两种方式可以同时为表的所有字段插入数据,第一种方式是不指定具体的字段名,第二种方式是列出表的所 ...

  4. [福建集训2011][LOJ10111]相框

    这题主要还是分类讨论欧拉回路 首先对于导线一端没有东西的新建一个节点 由于原图不一定连通所以需要用到并查集判断有多少个连通块 将一条导线连接的两个焊点连接 然后先对于只有一个连通块考虑 1.如果一个焊 ...

  5. 转 flowcanvas

    http://blog.sina.com.cn/s/blog_5fb40ceb0102wveq.html Unity 强大的可视化编程插件,Flowcanvas + Nodecanvas 组合(深度修 ...

  6. day5.am--拷贝构造与拷贝赋值

    Array& operator = Array(Array const& that){ //避免自赋值 if(&that != this){ //释放旧资源 if(m_arra ...

  7. 学习笔记60—SPSS

    一.直方图上显示曲线图:打开SPSS ----> 导入数据 ----> 描述统计 ----> 分析 ----> 频率 ----> 图表 ----> 直方图(勾上在直 ...

  8. [flask]gunicorn配置文件

    配置文件 #!/home/xx/.virtualenvs/xx/bin/python # encoding: utf-8 import multiprocessing # 监听端口 bind = '0 ...

  9. ionic调用手机系统的拨打电话

    android调用如下: 在config.xml中添加 <access origin="tel:*" launch-external="yes" /> ...

  10. Json string value cannot have line breaks（解决方法）

    点击所在的项目->Proterties->MyEclipse->Validation,把JSON Validator中的Manual和Build的对号给去掉,然后apply,OK. ...