首页澳门新葡亰官方网站 › 【葡京官方投注】html底子起航,html起航

【葡京官方投注】html底子起航,html起航

querySelectorAll   //根据指定规则返回页面中所有想匹配的元素
                        例如:querySelectorAll("#results td");
                               表示返回ID为result的元素下所有的单元格
下面这个例子使用到了selector API的方法:
  View Code
 
 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5   <meta charset="utf-8" />
 6   <title>Query Selector All Demo</title>
 7
 8   <style type="text/css">
 9     td {
10       border-style: solid;
11       border-width: 1px;
12       font-size: 200%;
13     }
14
15
16     #checkedResult {
17       color: green;
18       font-size: 200%;
19     }
20   </style>
21
22 </head>
23
24 <body>
25
26   <section>
27
28     <table>
29       <tr>
30         <td><input type="checkbox"
name="A1">A1</td>
31         <td><input type="checkbox"
name="A2">A2</td>
32         <td><input type="checkbox"
name="A3">A3</td>
33       </tr>
34
35       <tr>
36         <td><input type="checkbox"
name="B1">B1</td>
37         <td><input type="checkbox" checked
name="B2">B2</td>
38         <td><input type="checkbox"
name="B3">B3</td>
39       </tr>
40
41       <tr>
42         <td><input type="checkbox"
name="C1">C1</td>
43         <td><input type="checkbox"
name="C2">C2</td>
44         <td><input type="checkbox"
name="C3">C3</td>
45       </tr>
46
47     </table>
48     <div>Select various checkboxes, then hit the button to
identify them using querySelectorAll("*:checked").</div>
49     <button type="button" id="findChecked" autofocus>Find
checked boxes</button>
50     <div id="checkedResult"></div>
51
52       <script type="text/javascript">
53         document.getElementById("findChecked").onclick = function()
{
54
55           var selected = document.querySelectorAll("*:checked");
56           var result = "Selected boxes are: ";
57
58           for (var i = 0; i < selected.length; i++) {
59             result += (selected[i].name + " ");
60           }
61
62           document.getElementById("checkedResult").innerHTML =
result;
63
64         }
65       </script>
66   </section>
67
68 </body>
69
70 </html>
 
今天先写这么多,有时间再写。

html基础起航,html起航

废话不多说,直接上例子!

  工具善其事,必先利其器

  • 打开记事本,输入以下示例代码:

 

葡京官方投注 1 1
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="big5"> 5 <title>背包客旅行札记</title> 6
</head> 7 <body> 8 <header id="header"> 9
<hgroup> 10 <h1>背包客旅行札记</h1> 11
<h4>旅行是一种休息,而休息是为了走更长远的路</h4> 12
</hgroup> 13 <nav> 14 <ul> 15 <li><a
href="#">关于背包客</a></li> 16 <li
class="current-item"><a href="#">国内旅游</a></li>
17 <li><a href="#">国外旅游</a></li> 18
<li><a href="#">与我联络</a></li> 19
</ul> 20 </nav> 21 </header> 22 <article
id="travel"> 23 <section> 24 <h2>Hello World!</h2>
25 <p>四季都是适合旅行的季节。</p> 26
<p>不一定要花大钱,做点功课和多点自信,就能享受旅游的美好。</p>
27 </section> 28 <aside> 29 <figure> 30 <img
src="photo.png" alt="眣盯" /> 31 </figure> 32 </aside> 33
</article> 34 <footer> 35 HTML5网页练习 36 </footer>
37 38 </body> 39 </html> View Code

 

  • 保存,注意后缀为htm
  • 预览HTML网页

  打开浏览器,将文件拖曳到浏览器内,就可以看到结果了,嚯嚯!

      示例网页如下:

 葡京官方投注 2


 

  这样似乎还不够美观,加上CSS语法会变成这样:

    CSS后续会介绍,这里先暂时略过……  

葡京官方投注 3

    代码仅共参考:

葡京官方投注 4 1
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="big5"> 5 <title>背包客旅行札记</title> 6
<style type="text/css"> 7 article, aside, details, figcaption,
figure, footer, header, hgroup, menu, nav, section { display: block; } 8
html { 9 background-color: #F1F0DF; 10 } 11 body { 12 border: 3px solid
#660000; 13 background-color: #FFF; 14 font: 15px Helvetica,
"稬硁タ堵砰", Sans-Serif; 15 margin: 20px auto; 16 padding: 5px 10px; 17
width: 750px; 18 } 19 a { 20 color: #996600; 21 text-decoration: none;
22 } 23 h1, h2, h4 { 24 margin: 0; 25 } 26 a:hover { 27 color: #cc3300;
28 } 29 #header { 30 margin-bottom: 15px; 31 } 32 #header hgroup h4 {
33 font-style: italic; 34 font-weight: normal; 35 margin-bottom: 18px;
36 text-indent: 10px; 37 } 38 #header nav { 39 border-bottom: 1px solid
#DDDCCC; 40 font-size: 16px; 41 } 42 #header nav ul { 43 overflow:
hidden; 44 padding: 0 0 5px 0; 45 margin: 0; 46 } 47 #header nav li {
48 float: left; 49 list-style: none; 50 padding: 0 5px; 51 } 52 #header
nav li.current-item a { 53 color: #765C07; 54 } 55 #travel { 56
overflow: hidden; 57 text-align: justify; 58 } 59 #travel section { 60
float: left; 61 width: 350px; 62 } 63 #travel aside { 64 margin-left:
400px; 65 } 66 #travel aside figure { 67 margin: 0; 68 } 69 footer { 70
margin: 15px 0 10px; 71 text-align: center; 72 } 73 </style> 74 75
<!--[if lte IE 8]> 76 <script
src=";
77 <![endif]--> 78 79 </head> 80 81 <body> 82 83
<header id="header"> 84 85 <hgroup> 86
<h1>背包客旅行札记</h1> 87
<h4>旅行是一种休息,而休息是为了走更长远的路</h4> 88
</hgroup> 89 90 <nav> 91 <ul> 92 <li><a
href="#">关于背包客</a></li> 93 <li
class="current-item"><a href="#">国内旅游</a></li>
94 <li><a href="#">国外旅游</a></li> 95
<li><a href="#">与我联络</a></li> 96
</ul> 97 </nav> 98 99 </header> 100 101 <article
id="travel"> 102 103 <section> 104 <h2>Hello
World!</h2> 105 <p>四季都是适合旅行的季节。</p> 106
<p>不一定要花大钱,做点功课和多点自信,就能享受旅游的美好。</p>
107 </section> 108 109 <aside> 110 <figure> 111
<img src="photo.png" alt="眣盯" /> 112 </figure> 113
</aside> 114 115 </article> 116 117 <footer> 118
HTML5网页练习 119 </footer> 120 121 </body> 122
</html> View Code

  小结:这只是一个简单的引例,旨在开启我的学习之旅,将理论付诸于实践,当看到美美的页面展现在眼前时,是一种极大的满足啊!又该去看书了,先撤……

 

废话不多说,直接上例子!
工具善其事,必先利其器 打开记事本,输入以下示例代码: 1 ! DOCTYPE html 2
html 3 head 4...

本次学习HTML5的新标签元素有:

一、一个简单的HTML 5页面

1.在执行HTML 5页面前,有必要先检查浏览器是否支持HTML
5标记。在HTML代码<body>标记中加入下面代码:

<canvas id=“myCanvas” width="200" height="100" style="border:2px
solid #CCC;background-color:#EEE">

该浏览器不支持HTML 5的画布标记!

</canvas>

若不支持,页面显示文字“该浏览器不支持HTML
5的画布标记!”;若支持,显示画布。

2.HTML代码语法简洁、随意,先来看下面一段代码:

<!DOCTYPE HTML>

<META charset="utf-8"/>

<TITLE>我的第一个HTML 5页面</TITLE>

<p>Hello,World</p>

<!DOCTYPE
TYPE>,不包括版本号,就能告诉浏览器需要一个doctype来触发标准模式。

<META charset="utf-8">,说明了文档的字符编码。

同时,HTML 5不区分字母大小写,标记结束符及属性是否加引号。

在主体中,可以省略<html>和<body>标记,直接编写需要显示的内容。但在浏览器进行解析时,将会自动添加。

考虑到代码的可维护性,在编写代码时尽量增加这些在HTML
5代码中可选的元素,从而实现页面代码最大限度的简洁与完整。

1. 今天看了下html5高级程序设计这本书的第一章,现将自己觉得比较重要的一些东西罗列在这
2. HTML5包括了一下的一些新的功能点:
3. 新的DOCTYPE和字符集,和html4相比html5更加简洁明了如下所示:<!DOCTYPE
html> 和 <meta charset="utf-8">
4. 语义化标记,新的片段类元素
5. header    //标记头部区域的内容(用于整个页面或页面中的一块区域)
6. footer     //标记尾部区域的内容(用于整个页面或页面中的一块区域)
7. section   //WEB页面中的一块区域
8. article    //独立的文章内容
9. aside    //独立文章或者引文
nav      //导航类辅助内容

<section>页面的逻辑区域或内容组合;

二、HTML 5页面的特征

1.在web页面中使用一些带有语义性的标记可以加速浏览器解释页面中元素的速度,如早期的<samp>、<var>元素;HTML
5元素继承了这些元素,并根据用户使用最为频繁的类名称和ID号不断开发新的标记。

<!DOCTYPE HTML>

<head>

<meta charset="utf-8"/>

<title>页面结构</title>

<style type="text/css">

header,nav,article,footer{border:solid 1px #666 ;padding: 5px}

header{width: 500px}

nav{float: left;width: 60px;height:100px}

article{float: left; width: 428px; height: 100px}

footer{cleat: both;width: 500px}

</style>

</head>

<body>

<header>导航</header>

<nav>菜单</nav>

<article>内容</article>

<footer>底部说明</footer>

</body>

</html>

HTML
5中新增的<header>元素明确告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>表明页面已到页脚或根元素部分,并且这些标记都可以重复使用。

此外,有些新增的HTML 5元素还可以单独成为一个区域,如下列代码所示:

<header>

<article>

<h1>内容1</h1>

</article>

</header>

...

<header>

<article>

<h2>内容2</h2>

</article>

</header>

在HTML
5中,一个article可以创建一个新的节点,并且每个节点都可以有自己的单独元素,如<h1>或<h2>,这样不仅是内容区域各自分段,便于维护,而且代码简单,局部修改方便。

2.使用CSS文件美化HTML 5新元素

在支持HTML
5新元素的浏览器中,我们可以对任意一个元素应用CSS(包括直接设置或者引入CSS文件)。需要说明的是,在默认情况下,CSS假设元素的“display”属性是“inline”的,因此,为了更加正确的显示设置的页面效果,我们需要将元素的“display”属性设置为“block”。

<!DOCTYPE HTML>

<meta charset="utf-8"/>

<title>设置新元素的样式</title>

<style type="text/css">

article{display:: block}

article header p{font-size:13px}

article header h1{font-size:16px}

.p-date{font-size: 11px}

</style>

<article>

<header>

<p class="p-date">日期:2017-08-10</p>

<h1>

<a>今天的天气不错啊</a>

</h1>

<p>蓝蓝的天空中飘着几朵白云.</p>

</header>

</article>

由于有些浏览器并不支持HTML 5中的新增元素,如IE
8或更早版本,其CSS只应用IE支持的那些元素。因此,为了能使新增的HTML
5元素应用到样式,可以在头部标记<head>中加入如下JavaScript代码,这样就可以应用样式了。

<script type="text/javascript">

document.createElement('article');

documen.createElement('header');

</script>

考虑到各浏览器的兼容性不一样,可以对上述的JavaScript代码进行优化,即使用条件语句包含该JavaScript代码,使浏览器只在不支持HTML
5的情况下才执行这段脚本。

坚持完成了第一章节的学习,开心!~

对现在的我来说,每天读自己喜欢的书,学习自己喜欢的东西,有所得,有进步,就是幸福的~

在html5的实际编程中,开发人员必须使用css来定义样式,下面的代码包括了新的DOCTYPE,字符集和语义化标记元素。
  View Code
 
 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5   <meta charset="utf-8" />
 6   <title>HTML5</title>
 7   <link rel="stylesheet" href="html5.css">
 8
 9 </head>
10
11 <body>
12
13    <header>
14      <h1>Header</h1>
15      <h2>Subtitle</h2>
16      <h4>HTML5 Rocks!</h4>
17    </header>
18
19     <div id="container">
20
21         <nav>
22           <h3>Nav</h3>
23           <a href="">Link 1</a>
24           <a href="">Link 2</a>
25           <a href="">Link 3</a>
26         </nav>
27
28         <section>
29             <article>
30                 <header>
31                     <h1>Article Header</h1>
32                 </header>
33                 <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit
amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla
urna.</p>
34                 <p>Per inceptos himenaeos. Quisque feugiat,
justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
35                 <footer>
36                     <h2>Article Footer</h2>
37                 </footer>
38             </article>
39             <article>
40                 <header>
41                     <h1>Article Header</h1>
42                 </header>
43                 <p>HTML5: "Lorem ipsum dolor nunc aut nunquam
sit amet, consectetur adipiscing elit. Vivamus at est eros, vel
fringilla urna. Pellentesque odio</p>
44                 <footer>
45                     <h2>Article Footer</h2>
46                 </footer>
47             </article>
48         </section>
49
50         <aside>
51             <h3>Aside</h3>
52             <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit
amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla
urna. Pellentesque odio rhoncus</p>
53         </aside>
54         <footer>
55             <h2>Footer</h2>
56         </footer>
57     </div>
58 </body>
59
60 </html>
 
 以上的页面是没有经过css来设置样式的,下面的css样式html5.css使用到了如:圆角(border-radius)和旋转变换(transform:roate();)
  View Code
 
  1 /* html5 css file, Copyright ?Pro HTML5 Programming */
  2
  3 body {
  4     background-color:#CCCCCC;
  5     font-family:Geneva,Arial,Helvetica,sans-serif;
  6     margin: 0px auto;
  7     max-width:900px;
  8     border:solid;
  9     border-color:#FFFFFF;
 10 }
 11
 12 header {
 13     background-color: #F47D31;
 14     display:block;
 15     color:#FFFFFF;
 16     text-align:center;
 17 }
 18
 19 header h2 {
 20     margin: 0px;
 21 }
 22
 23 h1 {
 24     font-size: 72px;
 25     margin: 0px;
 26 }
 27
 28 h2 {
 29     font-size: 24px;
 30     margin: 0px;
 31     text-align:center;
 32     color: #F47D31;
 33 }
 34
 35 h3 {
 36     font-size: 18px;
 37     margin: 0px;
 38     text-align:center;
 39     color: #F47D31;
 40 }
 41
 42 h4 {
 43     color: #F47D31;
 44     background-color: #fff;
 45     -webkit-box-shadow: 2px 2px 20px #888;
 46     -webkit-transform: rotate(-45deg);
 47     -moz-box-shadow: 2px 2px 20px #888;
 48     -moz-transform: rotate(-45deg);
 49     position: absolute;
 50     padding: 0px 150px;
 51     top: 50px;
 52     left: -120px;
 53     text-align:center;
 54    
 55 }
 56
 57 nav {
 58     display:block;
 59     width:25%;
 60     float:left;
 61 }
 62
 63 nav a:link, nav a:visited {
 64     display: block;
 65     border-bottom: 3px solid #fff;
 66     padding: 10px;
 67     text-decoration: none;
 68     font-weight: bold;
 69     margin: 5px;
 70 }
 71
 72 nav a:hover {
 73     color: white;
 74     background-color: #F47D31;
 75 }
 76
 77 nav h3 {
 78     margin: 15px;
 79     color: white;
 80 }
 81
 82 #container {
 83     background-color: #888;
 84 }
 85
 86 section {
 87     display:block;
 88     width:50%;
 89     float:left;
 90 }
 91
 92 article {
 93     background-color: #eee;
 94     display:block;
 95     margin: 10px;
 96     padding: 10px;
 97     -webkit-border-radius: 10px;
 98     -moz-border-radius: 10px;
 99     border-radius: 10px;
100 }
101
102 article header {
103     -webkit-border-radius: 10px;
104     -moz-border-radius: 10px;
105     border-radius: 10px;
106     padding: 5px;
107
108 }
109
110 article footer {
111     -webkit-border-radius: 10px;
112     -moz-border-radius: 10px;
113     border-radius: 10px;
114     padding: 5px;
115 }
116
117 article h1 {
118     font-size: 18px;
119 }
120
121    
122 aside {
123     display:block;
124     width:25%;
125     float:left;
126 }
127
128 aside h3 {
129     margin: 15px;
130     color: white;
131 }
132
133 aside p {
134     margin: 15px;
135     color: white;
136     font-weight: bold;
137     font-style: italic;
138 }
139    
140
141 footer {
142     clear: both;   
143     display: block;
144     background-color: #F47D31;
145     color:#FFFFFF;
146     text-align:center;
147     padding: 15px;
148 }
149
150 footer h2 {
151     font-size: 14px;
152     color: white;
153 }
154
155
156 /* links */
157 a {
158     color: #F47D31;
159 }
160
161 a:hover {
162     text-decoration: underline;
163 }
 
注意:以上的例子最好使用chrome浏览器测试。
10. 使用Selectors API简化选取操作:新的QuerySelector方法包括了:
querySelector()   
//根据指定的选择规则,返回在页面中找到的第一个匹配元素

 

                       例如:querySelector("input.error");
表示返回第一个                      CSS类名为“error”的文本输入框

目前来看,HTML5的简单但强大,CSS3的丰富,二者结合能做出怎样的惊人的效果真的很令人期待。
继续学习!
 

2.HTML5包括了一下的一些新的功能点: 3.新的DO...

作者 Little Thinker

 

在图2-1中已经看到,相应标签实现的区域用名称标注了出来,比如头部Header

摘自 Keep Running

 

<article>定义正文或一篇完整的内容;

<footer>定义页面或区段的尾部;

转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=395

上一篇:

下一篇:

相关文章