1.使用元素
<code><code/>:<code>是标签 这里包含两个标签形成一个元素
两标签中间可输入文字：<code>this is code<code/>
也可以在标签中添加属性：<a href="https://www.baidu.com"> this is wen zi<a/>
当然一个元素可以应用多个元素 I like <a class="link" href="/apples.html" id="firstlink">apples</a> and orangs
2.空元素
空HTML元素 i like<code><code />apples and oranges
3.使用自闭合标签
使用一个标签表示空元素：I like <code />apples and oranges
4.使用虚元素
用单个开始标签表示虚元素 <hr>：因为浏览器知道<hr>是虚元素所以不会等待结束标签的出现
空元素结构的虚元素<hr />
5.使用自定义属性
用户可以自定义属性但必须以：data-开头 （为了区分html中的属性 和用户自定义属性）
1.1 外层结构
<! DOCTYPE HTML>
<html>
<!--elements go here--!>
</html>
<!DOCTYPE HTML>
1.2元数据
HTML元数据部分可以用来向浏览器提供文档的一些信息
在HTML中添加head元素
<!DOCTYPE HTML>
<html>
<head>
<title>example</title>
</head>
<body>
<!-- this is main content--!>
</body>
</html>
<!DOCTYPE HTML>
这个清单中只有title一个元素
1.3 HTML中元素之间的关系
父元素中包含子元素
head 是title的父元素
head title 都是html的后代元素
子元素是关系最近的后代元素
head和body就是兄弟元素
1.4 了解元素的类型
HTML5把元素分为三大类：元数据元素 流元素 和短语元素
元数据元素用来构建html的基本结构 以及就如何处理文档向浏览器提供信息和指示
1.5 使用HTML实体
在HTML文档中有些字符具有特殊意义 如<>有时需要在文档中使用到这些字符当又不想被当做HTML被处理 如java system.out.println(" \"\" ");
1.6 HTML全局属性
每种元素都可以有自己的局部属性
全局属性： 用来控制所有元素共有的的行为全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变，下面介绍所有的全局属性并示范其用法
1.6.1 accesskey属性：
用来设定几个或者一个用来选择页面上的元素快捷键。<input type="submit" value="log in" acccesskey="s "/> 按住ALT+s自动提交
1.6.2 class属性：
class属性用来将元素归类 这样做通常是为了能够找出文档中的某一类元素或为了某一类元素使用CSS样式。
1.6.3 contenteditable属性 ：
使得文本可编辑
<p contenteditable="true" >It can eidt</p>
1.6.4 contentmenu属性：
用来为元素设定快捷菜单，这种菜单会在受到触发的时候（例如：Windows 用户右键 弹出）可能尚无支持这个属性的浏览器
1.6.5 dir属性：
用来规定元素中文字的方向。其有效值有两个：ltr用于从左到右的文字和rtl（由于从右到左的文字）、
1.6.6
draggable属性 HTM5支持拖放操作的方式之一 用来表示元素是否可以被拖放
dropzone属性：HTML5支持拖放操作的方式之一 与上述draggable属性搭配使用
1.6.7 hidden属性
hidden是个布尔属性表示当前元素是否需要关注 浏览器对他的处理方式是隐藏的
1.6.8 id属性 用来给元素分配唯一一个标识符
通常用来将样式应用到元素上或在JavaScript程序中用来选择元素：
<head>
<style>
#w3clink{
background:grey;
..................
}
</style>
</head>
<body>
<a id="w3clink" href="https://www.baidul.com">baidu.com</a>
</body>
1,6.9 lang属性：用于说明元素内容使用的语言
使用lang属性：<p lang="en">English-----hello</p> <p lang="fr">Franch------ *****</p>
1.6.10 spellcheck属性：用来表示浏览器对元素内容进行检测是否有拼写错误 有两个值 true false
chrome处理方式： This is mispelled text 红线部分拼错浏览器给标记出来
1.6.11 title属性：
<a title="this is mouse" href="**********">this is mouse</a>
即：将鼠标放到给定this is mouse 会跳出小消息框 显示 （this is mouse ）title里面的内容
1.6.12 tabindex 获取焦点
tabindex=“1” tabindex="2"
day1源代码操作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
var elems = document.getElementsByClassName("class2");
for (i = 0; i < elems.length; i++) {
var x = elems[i];
x.style.border = "thin solid black";
x.style.background = "white";
x.style.color = "red";
}
var toggleHidden = function () {
var elem = document.getElementById("toggle");
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
} else {
elem.setAttribute("hidden", "hidden");
}
}
</script>
<style>
#w3clink{
background:grey;
color:white;
padding:5px;
border:thin solid black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> 祭坛</div>
<a class="class1 class2" href="https://www.baidu.com">baidu.com</a>
<p />
<a class="class2 otherclass" href="WebForm2.aspx">webForm2</a>
<hr />
<button οnclick="toggleHidden()">Toggle</button>
<table border="1"*>
<tr><th>Name</th><th>City</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr id="toggle" ><td>Joe Smith</td><td>New York</td></tr>
<tr><td>Anne Jones</td><td>Paris</td></tr>
</table>
<a href="http://apress.com">Apress web site</a>
<a id="w3clink" href="http://w3c.org">W3C web site</a>
<textarea spellcheck="true" lang="en">Helloss how are you</textarea>
<p lang="fr">Bonjour-comment </p>
<p>this is one</p>
<p tabindex="1">this is two</p>
<p tabindex="-1">this is three</p>
<p title="this is four hahaha it is title effect" style="background-color:green;color:red; padding:5px;">this is four</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.class2{
background-color:green;
padding:5px;
margin:2px;
font-size:40px;
}
.class1{
color:white;
}
.ontherclass{
margin:20px;
padding:5px;
color:RED;
}
.link{
color:grey;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
i like<code> apples </code>and oranges.
</div>
<ol>
<li>qde</li>
</ol>
<div>aoe</div>
<dl>
<dt>one</dt>
<dt>two</dt>
</dl>
<p style="text-align:right" >today is first day</p>
<a class="link" href="WebForm1.aspx" id="first">webform1</a><br />
enter your name: <input/>
<div class="wrapper">
<div class="heading">
</div>
</div>
<img src="Resources/img1.jpg" width="100" height="142"/>
</form>
<form>
<hr />
name: <input type="text" name="name" accesskey="n" /><p />
password:<input type="text" name="password" accesskey="p" /><p></p>
<input type="submit" value="submit" accesskey="q" />
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>
</form>
<a class="class1 class2" href="https://www.baidu.com/">baidu.com</a><p/>
<a class="class2 ontherclass" href="https://www.baidu.com/">dddd</a>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
