Dbettkk-Blog
0%

HTML学习

Posted on Edited on In Views: Valine:

简介

时隔几个月，终于又开始写博客了，原因呢，大学太颓废，还是得找点事给自己干，所以从现在开始学习前端开发，最开始，当然，从HTML开始，虽然之前也学过一些，但是总结的东西都不多，所以这次就当是正式开始系统的学习前端知识了，我的一个思路呢就是HTML->CSS->JS，先把这三大基础整透，再说后面的内容。写博客的目的呢，一是监督自己学习，二呢就是方便自己在学习的时候做好相关的笔记记录，这样也能给予自己前进的动力了，好了废话就说这么多，开始这一系列第一篇博客的更新了。

time：2020/04/07

HTML

在开始这篇博客前已经完成了一些准备工作如下：

vscode安装、webstorm安装、sublime安装，虽然这三个IDE都比较推荐，但我还是全都安装下来了，在使用过程中再来取舍。

HTML基础

用 style 属性代替旧的一些标签以及属性，如<font>,<basefont>,<s>,<u>,alion,color,bgcolor等等。将其变成以下样式：

1
2
3
4
<p style = "background-color:red"></p>
<p style = "color:red"></p>
<p style = "font-family:verdana"></p>
<p style="text-align:center"></p>

文本格式化标签

1
2
3
4
5
6
7
<!--粗体--> <b></b>
<!--着重文字--> <em></em>
<!--斜体--> <i></i>
<!--加重语气,和加粗差不多--> <strong></strong>
<!--插入字,即下划线--> <ins></ins>
<!--删除字--> <del></del>
<!--大号和小号--> <big></big> <small></small>

计算机输出标签

1
2
3
4
5
6
<!--代码--> <code></code>
<!--键盘码--> <kbd></kbd>
<!--计算机代码样本--> <sample></sample>
<!--打印机代码--> <tt></tt>
<!--变量，用于定义--> <var></var>
<!--预格式文本,在code内包围代码可实现保留空格回车--> <pre></pre>

引用

1
2
3
4
5
6
7
<!--短的引用--> <q></q>
<!--长引用，并会进行缩进处理--> <blockquote></blockquote>
<!--定义缩写，为浏览器提供帮助--> <abbr></abbr>
<!--定义缩写的意义，鼠标放置即可查看--> <dfn></dfn>
<!--定义文档或者文章的联系信息--> <address></address>
<!--定义著作的标题--> <cite></cite>
<!--双向书写，可以从左边开始--> <bdo></bdo>

time：2020/04/08

外部样式表

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

1
2
3
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

链接

1
2
3
4
5
<a href="url">Link text</a> <!--链接不一定是网页，也可以是图片等等-->
<a href="url" target="_blank"></a> <!--使链接在新窗口打开-->
<a name="xxx"></a> <!--定义锚点-->
<a href="#xxx"></a> <!--本文档其他位置可以创建访问锚点的链接,适用于pdf-->
<a href="https://....#xxx"></a> <!--其他界面创建访问该锚点的链接-->

图片

1
2
3
4
<!--alt在图片未加载的时候显示，无闭合标签-->
<img src="" alt="loading..." alion="left" width="" height=""/> 
<!--还可用<a>包裹图片制作图片链接-->
<!--还可利用<map>,<area>来定义图像地图-->

time：2020/04/09

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1" cellpadding="10" cellspacing="10"> 
    <!--border表示表格边框的厚度 cellpadding表示边界与单元内容之间的距离 cellspacing规定单元格之间的距离-->
    <caption>我的标题</caption> <!--表格标题-->
<tr>
	<th rowspan="2">Heading</th> <!--表头 加粗居中 横跨两行-->
	<th colspan="2">Another Heading</th> <!--横跨两列-->
</tr>
<tr>
	<td>row 1, cell 1</td>
	<td>row 1, cell 2</td>
</tr>
<tr>
	<td>&nbsp;</td> <!--避免空单元格，会使边框无法显示，使用空格占位-->
	<td>row 2, cell 2</td>
</tr>
</table>
<!--表格中每个单元格都可设置颜色、背景、对齐方式、frame属性等等-->

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--无序列表 type代表小圆点的类型-->
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<!--有序列表 start设置开始序号 type代表序号的类型-->
<ol start="50" type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<!--列表都可以嵌套使用-->
<!--自定义列表 dt标题 dd内容-->
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

块

1
2
3
4
5
<!--块元素和内联元素区别就是 块元素会以新行来开始 而内联元素则不会-->
<!--块级：<h1>, <p>, <ul>, <table>-->
<!--内联级：<b>, <td>, <a>, <img>-->
<!--<div>块级元素 和CSS一起使用对大块地方进行样式设计--> <div></div>
<!--<span>内联级元素 和CSS一起使用对文本进行样式设计--> <span></span>

类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。-->
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!--<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。-->
<!--DIV的ID属性和CLASS属性的区别-->
<!--id对应css是用样式选择符“#”（井号）class对应css是用样式选择符“.”(英文半角输入句号)-->
<!--id属性，只能被一个元素调用（以“#”选择符命名CSS样式在一个页面只能使用调用一次）
class类标记，可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)-->
<!--一个代表身份证，一个代表衣服,下方是实例-->
<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>

time:2020/04/10

框架

1
2
3
4
5
<!--框架结构标签<frameset>,rows和cols的值规定了每个框架所占的面积-->
<!--框架标签<frame>,每个frame中设置一个html文档-->
<!--假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。-->
<!--重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）-->
<!--这里都是简要介绍，具体的应用现在还无法完全掌握-->