HTML基础知识学习记录
一、使用元素
1、 a:生成超链接
2、 body:表示HTML文档的内容
3、 button:生成用来提交表单的按钮
4、 code:表示计算机代码片段
5、 DOCTYPE:表示HTML文档的开始
6、 hr:一条直线
7、 html:表示文档的HTML部分
8、 input:表示用户输入的数据
9、 label：生成另一元素的说明标签
10、 p:表示段落
11、 style:定义CSS样式
12、 table:用表格组织的数据
13、 td:表格单元格
14、 th:表头单元格
15、 textarea:生成用于获取用户输入数据的多行文本框
16、 title:HTML文档的标题
17、 tr:表格行
18、 br:换行
其他特性：空元素、自闭合元素、虚元素（如hr）
二、使用元素属性
1、一个元素使用多个属性
如：I like <a class="link" href="/apple.html" id="firstlink">apple</a>.
2、使用布尔属性
如：enter your name:<input disabled> //disable本来存在，但也可给它设值
enter your name:<input disabled="">
enter your name:<input disabled="disabled">
3、使用自定义属性
以data-开头的属性
如：enter your name:<input disabled="true" data-creator="adam" data-purposr="collection">
三、创建HTML文档
实例：
<!DOCTYPE HTML>
<html>
<head>
<title>hello world<title>
</head>
<body>
I like <code>apple</code>.
</body>
</html>
四、全局属性
1、accesskey属性
作用：设置快捷键
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name: <input type="text" name="name" accesskey="n">
<p/>
Password: <input type="password" name="password" accesskey="p">
<p/>
<input type="submit" value="Login" accesskey="s">
</form>
</body>
</html>
2、class属性
用于将元素归类，通常是为了能找到文档中的某一类元素或者为某一类元素应用CSS样式。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.class2{
background-color:grey;
color:white;
padding:5px;
margin:2px;
}
.class{
font-size:x-large;
}
</head>
<body>
<a class="class1 class2" href="http://apress.com">Apress web site</a>
<p/>
<a class="class2 classother" href="http://w3c.org">W3C web site</a>
</body>
</html>
或者在脚本中使用class属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a class="class1 class2" href="http://apress.com">Apress web site</a>
<p/>
<a class="class2 classother" href="http://w3c.org">W3C web site</a>
<script type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for(i=0;i<elems.length;i++){
var x = elems[i];
x.style.border = "thin solid black";
x.style.backgroundColor = "white";
x.style.color = "black";
}
</script>
</body>
</html>
3、contenteditable属性
顾名思义：就是可编辑的属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p contenteditable="true">It is raining ringht now</p>
</body>
</html>
为元素设定快捷菜单
5、dir属性
用来规定元素中文字的方向：ltr(用于从左到右的文字)和rtl(用于从右到左).
可以在<p>元素中使用
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p dir="ltr">It is left-to-right</p>
<p dir="rtl">It IS right-to-left</p>
</body>
</html>
6、draggable属性与dropzone属性
通常搭配使用，用来表示元素是否可拖放.
7、hidden属性
布尔属性，表示相关元素当前无需关注，用来隐藏相关元素.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script>
var toggleHidden = function(){
var elem = docment.getElemtById("toggle");
if(elem.hasAttribute("hidden")){
elem.removeAttribute("hidden");
}else{
elem.setAttribute("hidden","hidden");
}
}
</script>
</head>
<body>
<button onclick="toggleHidden()">Toggle</button>
<table>
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Adam Freeman</td>
<td>London</td>
</tr>
<tr id="toggle" Hidden>
<td>Joe Smith</td>
<td>New York</td>
</tr>
<tr>
<td>Anne Jones</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
8、ID属性
给元素分配一个唯一的标识符，这种标识符通常用来将样式应用到元素上或者在JavaScript程序中用来选择元素.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#w3clink{
backgound:grep;
color:white;
padding:5px;
border:thin solid black
}
</style>
</head>
<body>
<a href="http://apress.com">Apress web site</a>
<p/>
<a id="w3clink" href="http://w3c.com">W3C web site</a>
</body>
</html>
9、lang属性
用来标识元素内容使用的语言.
<p lang="en/fr/es...">xxxxxx</p>
10、spellcheck属性
用于检查输入元素输入内容的拼写问题
<textarea spellcheck="true">xxxxxxxxx</textarea>
11、style属性
用来直接在元素身上定义CSS样式.
<a href="http://apress.com" style="backgound:grep;color:white;padding:10px">visit the Apress web site</a>
12、tabindex属性
改变tab键切换元素顺序
name: <input type="text" name="name" tabindex="1">
city: <input type="text" name="city" tabindex="0">
13、title属性
提供元素的额外信息，把鼠标移动到相关元素上就会显示的内容.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
