学习html的⼼得体会
⽂章⽬录
1、HTML的简介及⼤体介绍：
HTML 是⽤来描述⽹页的⼀种语⾔。
它是⼀种超⽂本标记语⾔，并不是⼀种编程语⾔。它包含了⼀套标记标签，并⽤此来描述⽹页。因此HTML⽂档包含了HTML标签和⽂本内容。
HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，⽐如 <p> 和 </p> 标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签 ⼀个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是⼀个段落。</p> .并且标签是可以嵌套的。
2、HTML的运⽤总结：
1）⼀个html⽂档的格式
<html>
<head> … </head>
<body> … </body>
</html>
2）以下是对标签作⽤的总结：
HTML段落是通过 <p>来定义的。
HTML链接是通过 <a>来定义的。
标签 <img>⽤来定义图像
标签<alt>⽤于替⽤。
标签<br>表⽰换⾏
标签<center>⽤于⽂本的居中
标签<div>表⽰内容之间分隔
标签<dl>⽤于定义列表
标签<ol>⽤于排序列表
标签<ul>表⽰不排序列表
标签<h1-6>表⽰标题1到标题6，有⼤⼩之分。
标签<hr>⽤于在内容之间有⼀条⽔平线。
标签<pre>表⽰⽤户预定义格式。
标签<span>表⽰⼀个范围。
标签<td>表⽰表格中的内容
标签<th>表⽰表格中的表头
标签<tr>表⽰表格中的⼀⾏
3、HTML的⼀些知识点：
1）空元素：
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。例如：<p>我可以<br>换⾏</p>br为空元素。
2）属性：
HTML元素可以设置属性；属性⼀般描述于开始标签；属性总是以名称/值对的形式出现。例如：<a href="www.baidu/"
target="_blank">百度⼀下</a> href和target为a元素的属性。
3）注释：
HTML注释的写法：<!-- 这是⼀个注释 >
4）查看⽹页代码：
在⼀个⽹页中按住F12即可查看⽹页代码。
5）HTML格式化标签：
(“bold”) 与 (“italic”) 对输出的⽂本进⾏格式, 如：粗体 or 斜体
HTML格式化标签指的是：HTML 使⽤标签 (“bold”) 与
6）超链接：
HTML超链接可以是⼀个字，⼀个词，或者⼀组词，也可以是⼀幅图像! 您可以点击这些内容来跳转到新的⽂档或者当前⽂档中的某个部分。在标签a中使⽤了href属性来描述链接的地址。并且可以为超链接设置CSS样式。例如：<a href="www.baidu/" target="_blank">百度⼀下</a>
7）head元素：
HTML的head元素中包含了所有的头部标签元素。在 head元素中你可以插⼊脚本（scripts）, 样式⽂
件（CSS），及各种meta信息。例如title元素定义了浏览器⼯具栏的标题；在style 元素中你也可以直接添加样式来渲染 HTML ⽂档；meta标签描述了⼀些基本的元数据。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{color:blue;}
</style>
<link rel="shortcut icon"href="favicon.ico"type="image/x-icon">
<title>页⾯标题</title>
</head>
<body>
<h1>我的第⼀个Web页</h1>
<p>当前有点丑：)</p>
</body>
</html>
8）img标签：
在 HTML 中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页⾯上显⽰图像，你需要使⽤源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。语法为<img src=“url”> 例如：<img src="mdbootstrap/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
9）表格：
HTML表格由<table>标签定义，每个表格均有若⼲⾏（由 <tr>标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。表格的表头使⽤ <th> 标签进⾏定义，并且会显⽰为粗体居中。例如：
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
10）列表：
HTML ⽀持有序、⽆序和⾃定义列表。⽆序列表使⽤ <ul> 标签；有序列表始于<ol> 标签⾃定义列表以 <dl> 标签开始，每个⾃定义列表项以<dt>开始。每个⾃定义列表项的定义以 <dd> 开始。例如：
⽆序列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
⾃定义列表：
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
11）HTML元素种类：
⼤多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显⽰时，通常会以新⾏来开始（和结束）。实例: <h1> , <p>,<div> ，内联元素在显⽰时通常不会以新⾏开始。实例: <img> ,<span>
12）表单：
HTML表单通过标签<form>来定义 。多数情况下被⽤到的表单标签是输⼊标签（<input>）。其中type属性为text的表⽰字母、数字、汉字等内容；属性为password表⽰为密码，字符以星号或圆点替代。
属性为radio定义了单选框。属性为checkbox表⽰⼀个复选框。属性为submit定义为提交按钮。例如：
<!-- ⽂本框，注意有 placeholder 提⽰符 -->
⽤户名：<br>
<input type="text"name="name"placeholder="请输⼊⽤户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password"name="ps"placeholder="请输⼊密码"><br>
年龄：<br>
<!-- 数字输⼊框，注意 min 和 value 属性-->
<input type="number"name="age"min="18"value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio"name="gender"value="male"checked>男<br>
<input type="radio"name="gender"value="female">⼥<br>
<input type="radio"name="gender"value="other">其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R"selected>共和党</option>
<option value="N">⽆党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通⼯具：<br>
<input type="checkbox"name="vehicle1"value="Bike">⾃⾏车<br>
<input type="checkbox"name="vehicle2"value="Motocycle"checked>摩托车<br>
<input type="checkbox"name="vehicle3"value="Car">轿车<br>
<input type="checkbox"name="vehicle4"value="Jet">飞机<br>
<!-- ⽇期选择器 -->
您的⼯作⽇期：<br>
<input type="date"><br>
<!-- ⽂件选择器 -->
上传您的照⽚:<br>
<input type="file"name="photo"><br>
<!-- ⽂本输⼊区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message"rows="5"cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进⾏处理 -->
<input type="submit"value="提交">
<input type="reset"value="重置">
</form>
4、对HTML学习的体会：
html网页设计实验心得通过对HTML的学习我发现HTML是⼗分重要的⼀个超⽂本标记语⾔，它虽然不是⼀门编程语⾔但是它却⼗分强⼤，它⾥⾯包含了很多标签，通过这些标签我们使⽤者就可以根据⾃⼰的需要来设计⼀个⽹页，把我们想要表达的内容放进这个⽹页当中
，它定义了⽹页内容的含义和结构。但是仅仅通过HTML是不能设计⽹页的样式的，要想更好的设计出⼀个好看的⽹页需要使⽤CSS技术。因此，对于HTML的学习要和CSS相互结合，多运⽤，这样⼆者才能交相辉映，我们才能设计出内容新颖、样式显眼的⽹页。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。