HTMLlesson1.1 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a{
 8             /*去掉a的下划线*/
 9             text-decoration: none;
10         }
11     </style>
12 </head>
13 <body>
14 <a href="http://www.baidu.com" target="_blank">百度</a>
15 </body>
16 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         table{
 8             border-collapse: collapse;   /*边界友好*/
 9             text-align: center;    /*文字居中*/
10         }
11     </style>
12 
13 </head>
14 <body>
15     <table border="1">
16         <caption><b>学员信息表</b><br></caption>
17         <thead>
18             <tr>
19                 <th>name</th>
20                 <th>age</th>
21                 <th>class</th>
22                 <th>home</th>
23             </tr>
24         </thead>
25         <tbody>
26             <tr>
27                 <td>小白</td>
28                 <td rowspan="2">18</td>
29                 <td>30</td>
30                 <td>changsha</td>
31             </tr>
32             <tr>
33                 <td>gkl</td>
34                 <!--<td>19</td>-->
35                 <td>30</td>
36                 <td>wuhan</td>
37             </tr>
38             <tr>
39                 <td>小泼</td>
40                 <td>18</td>
41                 <td>29</td>
42                 <td>cc</td>
43             </tr>
44         </tbody>
45     </table>
46 </body>
47 </html>

 

 1 块级元素div  display:block;
 2 可以包含任何块和行内元素
 3 独占一行，支持设置宽高
 4 如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
 5 没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0
 6 
 7 
 8 行内（内联）元素span   display:inline;
 9 可以和其他行内元素位于同一行
10 行内元素不要包块级元素
11 不支持设置宽高
12 内容撑开宽高
13 
14 行内块元素  display:inline-block;
15 块级元素可以横排展示
16 行内元素可以设置宽高
17 元素既能设置宽高 也能排在一排
18 
19 display:none
20 隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             display: inline-block;
 9         }
10     </style>
11 
12 </head>
13 <body>
14     <h1><span>如懿传 (2018)</span></h1>
15     <div>
16         <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.webp" alt="如懿传">
17         <div>
18             <p><span>导演：</span><a href="https://movie.douban.com/celebrity/1316096/" target="_blank">汪俊</a></p>
19             <p><span>编剧: </span><a href="https://movie.douban.com/celebrity/1325703/" target="_blank">流潋紫</a></p>
20             <p><span>主演: </span><a href="javascript:void(0)">周迅 / 霍建华 / 张钧甯 / 李纯 / 辛芷蕾 / 更多...</a></p>
21             <p><span>类型:</span><a href="javascript:void(0)"> 剧情 / 历史 / 古装</a></p>
22             <p><span>制片国家/地区: </span><a href="javascript:void(0)">中国大陆</a></p>
23             <p><span>语言: </span><a href="javascript:void(0)">汉语普通话</a></p>
24             <p><span>首播:</span><a href="javascript:void(0)"> 2018-08-20(中国大陆)</a></p>
25             <p><span>又名: </span><a href="javascript:void(0)"> 后宫·如懿传 / 甄嬛传续集 / Ruyi's Royal Love in the Palace</a></p>
26             <p><span>集数: </span><a href="javascript:void(0)"> 87 </a></p>
27             <p><span>IMDb链接: </span><a href="https://www.imdb.com/title/tt7817930/">tt7817930</a></p>
28         </div>
29     </div>
30 </body>
31 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a{
 8             /*去掉a的下划线*/
 9             text-decoration: none;
10         }
11     </style>
12 </head>
13 <body>
14     <a href="" id="box">我是顶部的a标签</a>
15     <!--h1在一个页面上出现一次  h2-h6自己分配-->
16     <h1 class="box box1 box2">我是h1标签</h1>
17     <h2 class="box box1 box3">我是h2标签</h2>
18     <h3 id="box1">我是h3标签</h3>
19     <h4>我是h4标签</h4>
20     <h5>我是h5标签</h5>
21     <h6>我是h6标签</h6>
22     我是外面的
23 
24     <h2>段落标签</h2>
25     <p>
26         &emsp;&emsp;在您开始之前,在你的计算机将需要Python，但您可能不需要下载它。 首先检查(在命令行窗口输入python)有没有安装<b>Python</b> !如果你看到了一个Python解释器的响应，那么就能在她的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向后兼容。
27     </p>
28     <p>
29         &emsp;&emsp;如果您需要安装， 您不妨下载最近稳定的版本。 就是那个以没有被标记作为alpha或Beta发行的最高的版本。目前最稳定的版本是Python3.0以上
30     </p>
31     <h2>粗体标签</h2>
32     <!--b标签 只是物理加粗   strong 不仅加粗 还利于seo搜索-->
33     <b>我是B标签</b>
34     <strong>我是strong标签</strong>
35     我是写在外面的
36     <h2>斜体标签</h2>
37     <!--i标签 只是斜体   em 不仅斜体 还利于seo搜索-->
38     <!--br 换行标签   hr水平线标签-->
39     <i>我是i标签</i><br>
40     <em>我是em标签</em><hr>
41     我是写在外面的
42     <h2>特殊符号</h2>
43     <p>
44         小于号：---&lt;<br>
45         大于号：---&gt;<br>
46         空格符号：---12&nbsp;34<br>
47         空白位：---12&emsp;34<br>
48         版权符号：---&copy;
49     </p>
50 
51     <h2>a标签</h2>
52     <!--href 是a标签的标签属性-->
53     <!--
54     target属性
55           _self 当前页面打开  默认
56           _blank 在新窗口打开
57     -->
58     <a href="http://www.baidu.com" target="_blank">点击去百度</a>
59     <a href="#box">锚点</a>
60     <!--
61        只有拥有name属性的a标签才有锚点
62        其他标签可以通过id属性实现锚点
63       -->
64     <a href="javascript:void(0);">死链接</a>
65     <a href="#">回到顶部</a>
66     <!--
67    HTML书写规范
68    1.名字用小写字母
69    2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文
70    3.驼峰命名
71        className  第二个单词首字母大写
72    4.id命名
73        id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样
74    5.class命名
75        class可以出现多次，而且相同的名字可以有多个，相当于人名一样
76     -->
77 </body>
78 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a{
 8             /*去掉a的下划线*/
 9             text-decoration: none;
10         }
11     </style>
12 </head>
13 <body>
14     <a href="" id="box">我是顶部的a标签</a>
15     <!--h1在一个页面上出现一次  h2-h6自己分配-->
16     <h1 class="box box1 box2">我是h1标签</h1>
17     <h2 class="box box1 box3">我是h2标签</h2>
18     <h3 id="box1">我是h3标签</h3>
19     <h4>我是h4标签</h4>
20     <h5>我是h5标签</h5>
21     <h6>我是h6标签</h6>
22     我是外面的
23 
24     <h2>段落标签</h2>
25     <p>
26         &emsp;&emsp;在您开始之前,在你的计算机将需要Python，但您可能不需要下载它。 首先检查(在命令行窗口输入python)有没有安装<b>Python</b> !如果你看到了一个Python解释器的响应，那么就能在她的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向后兼容。
27     </p>
28     <p>
29         &emsp;&emsp;如果您需要安装， 您不妨下载最近稳定的版本。 就是那个以没有被标记作为alpha或Beta发行的最高的版本。目前最稳定的版本是Python3.0以上
30     </p>
31     <h2>粗体标签</h2>
32     <!--b标签 只是物理加粗   strong 不仅加粗 还利于seo搜索-->
33     <b>我是B标签</b>
34     <strong>我是strong标签</strong>
35     我是写在外面的
36     <h2>斜体标签</h2>
37     <!--i标签 只是斜体   em 不仅斜体 还利于seo搜索-->
38     <!--br 换行标签   hr水平线标签-->
39     <i>我是i标签</i><br>
40     <em>我是em标签</em><hr>
41     我是写在外面的
42     <h2>特殊符号</h2>
43     <p>
44         小于号：---&lt;<br>
45         大于号：---&gt;<br>
46         空格符号：---12&nbsp;34<br>
47         空白位：---12&emsp;34<br>
48         版权符号：---&copy;
49     </p>
50 
51     <h2>a标签</h2>
52     <!--href 是a标签的标签属性-->
53     <!--
54     target属性
55           _self 当前页面打开  默认
56           _blank 在新窗口打开
57     -->
58     <a href="http://www.baidu.com" target="_blank">点击去百度</a>
59     <a href="#box">锚点</a>
60     <!--
61        只有拥有name属性的a标签才有锚点
62        其他标签可以通过id属性实现锚点
63       -->
64     <a href="javascript:void(0);">死链接</a>
65     <a href="#">回到顶部</a>
66     <!--
67    HTML书写规范
68    1.名字用小写字母
69    2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文
70    3.驼峰命名
71        className  第二个单词首字母大写
72    4.id命名
73        id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样
74    5.class命名
75        class可以出现多次，而且相同的名字可以有多个，相当于人名一样
76     -->
77 </body>
78 </html>

 

posted @ 2018-10-08 23:19  kanglun  阅读(213)  评论(0)    收藏  举报