认识 HTML 4.0
来源：互联网 发布：日语扫描翻译软件 编辑：程序博客网 时间：2024/06/08 14:44
首先我们先对HTML简单介绍一下：HTML不是一种编译语言，而是一种超文本标记语言（Hyper Text Markup Lanfuage）,标记语言是一套标记标签，通常是成对出现的，有其实标签就有结束标签，格式是尖括号包围的关键词，比如：<html></html>。HTML用它来描述网页，这些标签不显示在网页中。
接下来要介绍一下我们用什么来写HTML：（1）最简单的就是我们电脑上的记事本（适合初学者，没有代码不全功能，完全靠自己去敲，利于记忆），打开记事本写下HTML标签和内容，另存为.html文件，要注意的就是在另存时选择文件类型是所有文件，保存好后显示的是more吗浏览器的图标，我们双击它就可以通过浏览器来访问它。
我在学习的时候使用的是WebStorm 10.0.3,介绍一下WebStorm简单的用法
首先就是安装，安装好以后双击，点击empty project。进去以后点击file——>new——>Directory，选择文件存储位置，创建一个HTML文件应该这样：右击新建文件夹new——>HTML file，然后这个新的html文件就在你新建的文件夹下面。双击html文件，然后我们就可以在右边写标签和内容啦。
下面我们正式进入HTML学习
首先就是HTML最简单的的主体：
<!DOCTYPE html><html><head> <title></title></head><body></body></html><head>是头部，<body>是身体，就像一个人一样。<head>里面有<title>,<title>的内容是显示网页的名称的，任何要显示在页面中的东西都要写在body里面。例子如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>美丽世界</title></head><body>我的第一个网页</body></html>注意：
<meta charset="UTF-8">这是为了防止出现乱码的，这是编码方式结果展示：
下面我们开始介绍各个标签的作用：
<h1></h1> <h2></h2> <h3></h3> <h4></h4><h5> </h5><h6></h6>标签：用来定义标题，只有这六个，没有其他。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>标题标签</title></head><body><h1>北京欢迎您</h1><h2>北京欢迎您</h2><h3>北京欢迎您</h3><h4>北京欢迎您</h4><h5>北京欢迎您</h5><h6>北京欢迎您</h6></body></html>结果展示：
<p></p>标签：定义段落的标签
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>美丽世界</title></head><body><p>我的第一个网页</p><p>我是来自中国的一名学生</p></body></html>结果展示：
<a></a>标签：定义超链接，他的主要属性有href，target。href的属性值就是所要链接的网址，target属性是值就是表示连接的新的网页打开是在原来的 窗口下打开，还是在新的窗口打开如果，如果target的属性值为_parent则为在原窗口打开新的页面，如果target属性值为_blank表示在新的窗口打开新的页面。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head> <body> <a href="http://www.baidu.com" target="_parent">百度</a> <a href="http://www.bing.com" target="_blank">必应</a> </body></html>
结果展示：
<img>标签：插入图像时会用到。插入图片时，图片的位置可以是相对路径，也可以是绝对路径，相对路径是所要插入文件相对于当前的html文件的位置，绝对路径是相对于相对于电脑的根目录而言的。
<img src="img/123.png" width="210">用浏览器打开网页后，图片就在浏览器中显示。注意：我们在改变图片大小时，只写图片的宽度或者高度，不要同时设置宽高，这样可以保证图片正比例缩放。
<br>标签：换行标签
我<br>喜<br>欢<br>你
结果展示：
<table><tr><td><th>标签：用来定义表格的标签。<tr>表示行，<td>表示列，<th>表示的标题，有居中和加粗的效果。
<body> <table border="1px"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> <td>156-4569-7892</td> </tr> </table> </body>
结果展示：
<table>的属性有width，height，border，bordercolor，align，background等等
<body> <table border="1px" bordercolor="red" width="500px" height="20px" align="center"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td bgcolor="aqua">张三</td> <td>18</td> <td>男</td> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> <td>156-4569-7892</td> </tr> </table> </body>
结果展示：
cellpadding和cellspacing的区别：他们是table的属性，cellpadding是单元格的填充，cellspacing是单元格与单元格之间的距离
<body> <table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellspacing="20px"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td bgcolor="aqua">张三</td> <td>18</td> <td>男</td> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> <td>156-4569-7892</td> </tr> </table> </body>结果展示：
<body> <table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td bgcolor="aqua">张三</td> <td>18</td> <td>男</td> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> <td>156-4569-7892</td> </tr> </table> </body>结果展示：
rowspan和colspan的区别：colspan是跨列，rowspan是跨行。
<body> <table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td bgcolor="aqua">张三</td> <td colspan="2">18</td><!--<td>男</td>--> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> <td>156-4569-7892</td> </tr> </table>结果展示：
<body> <table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> <tr> <td bgcolor="aqua">张三</td> <td>18</td> <td>男</td> <td>123-4569-7892</td> </tr> <tr> <td>李四</td> <td>20</td> <td rowspan="2">女</td> <td>110-4569-7892</td> </tr> <tr> <td>王五</td> <td>20</td> <!--<td>女</td>--> <td>156-4569-7892</td> </tr> </table> </body>结果展示：
<form>标签：定义一个表单。表单里面包含文本框，密码框，单选按钮组，下拉列表，提交按钮，复选框等。
<form> <lable for id="user">姓名:</lable> <input type="text" id="user"><br> <lable for id="pw">密码:</lable> <input type="password" id="pw"><br> 性别:<input type="radio" name="sex" checked value="男">男 <input type="radio" name="sex" value="女">女<br> 爱好:<input type="checkbox" value="篮球">篮球<br> <input type="checkbox" value="羽毛球">羽毛球<br> <input type="checkbox" checked value="跳舞">跳舞<br> <input type="checkbox" value="唱歌">唱歌<br> <select> <option value="陕西" >陕西</option> <option value="山东">山东</option> <option selected value="云南">云南</option> <option value="四川">四川</option> </select>省<br> <select multiple> <option value="陕西" >陕西</option> <option selected value="山东">山东</option> <option value="云南">云南</option> <option value="四川">四川</option> </select>省<br> 留言:<textarea rows="10" cols="40"></textarea><br> <input type="submit" value="提交"> <input type="reset" value="重置"></form>
结果展示：
关于字体变化的标签：<b>、<i>、<strong>、<em>、<small>、<sub>、<sup>
<p>定义粗体文本<b>定义粗体文本</b></p><p>定义斜体文本<i>定义斜体文本</i></p><p>定义着重字体<em>定义着重字体</em></p><p>定义小号字体<small>定义小号字体</small></p><p>定义加重语气<strong>定义加重语气</strong></p><p>定义下标字：H<sub>2</sub>O</p><p>定义上标字：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>结果展示：
<pre>预格式化标签，可以保留空格。<p>标签想要留下空格可以用 ，表示留半角的空格。<p>标签在全角状态下的空格都可以保留，但是半角状态下，不管连续多少个半角空格，只留下一个半角空格。
<hr size="10px" color="red" width="1000px"><br><hr><br><P>预格式化</P><pre>你是 一位很厉害的 人</pre><p>你是 一位 很厉害的 人</p><hr>表示的是一条线，可以通过属性定义它的长度，粗细，颜色等
<hr size="10px" color="red" width="1000px">
结果展示：
- 认识 HTML 4.0
- 认识HTML
- 认识html
- 认识HTML
- 认识HTML
- 认识HTML
- HTML学习---------认识html标签
- HTML基础-认识HTML 01
- 第一篇 HTML 认识HTML
- 一.认识HTML DOM
- 认识html和xml
- Html初级认识
- Lesson_for_java_day01---html初步认识
- 认识html标签
- 认识html标签
- 【1】HTML初认识
- html新认识
- 认识HTML标签
- hopfield神经网络
- 高效DDD聚合设计
- 十大前端开发框架(上)
- 类（python）
- tensorflow(5)-辅助函数
- 认识 HTML 4.0
- VS2015 MATLAB混合编程之COM组件
- 共享内存
- 文章标题
- KindEditor编辑器使用
- CSdn测试
- PyTorch笔记5-save和load神经网络
- 作业帮-将json数组里面的每一个对象的value取出生成与之对应的二维数组
- 串口 SWD Jtag
