HTML总结

HTML学习心得

---

关于html—超文本标记语言，这一章的学习令我很开心，简单的入门也弄了我几个小时，如下是我对HTML的一些学习总结与心得：

1. 标题

   标题有六级标题分别为

   ~

   ，主要用来突出文章内容。

   2. 文本格式

   文本格式在HTML中使用较少，主要使用css来对页面进行美化。但是HTML中也有一些。比如高光，删除,删除，下划线, 缩小体, 粗体,斜体,这些标签可用于文本格式。

   3. 超链接

   我认为超链接很神奇，还蛮好用的，任何东西都可加上超链接，比如文本，图片，小图标等等，超链接的语法格式为：

   <a href="https://www.baidu.com/" target="_blank">百度一下</a>
   

   图片上加超链接：

   <a href="https://www.baidu.com/" target="_blank"><img src="***.jpg"></a>
   

   4. 锚点

   也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

   先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。具体格式为：

   <!-- 文档其余部分 -->
   <h2 id="C4">第四章 论零号病人的重要性</h2>
   <!-- 文档其余部分 -->
   <a href="#C4">跳到第四章</a>
   <!-- 文档其余部分 -->
   

   其中，元素id值必须唯一，另外，超链接中的地址需要#符号。

   5. 图片

   再页面中插入一张图片格式如下：

   <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
   

   1. src属性为要显示图片文件的位置 URL，即图片文件的路径
   2. alt属性当获取图片出现问题时显示的文字（占位符）
   3. 可为图片指定高宽度，但不建议（可能导致图片变形

   6. 文件路径

   示例	注释
   <img src="picture.jpg">	该图片文件与当前文档在同一目录中
   <img src="./images/picture.jpg">	该图片文件在当前目录下的images目录中
   <img src="../picture.jpg">	该图片文件在上一级目录中

   7. 表格

   表格使用<table>标签，<tr>代表行，<td>代表行中的单元，<th>代表表头元素，示例如下：

    <table>
       <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>
   

   8. 列表

   • 无序列表

   使用<ul>标签，默认使用实心圆点，也可为空心圆circle,实心方块square，以及不出现标志

   <ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   </ul>
   

   • 有序列表

   使用<ol>标签，默认使用数字作为每项的标志，其他标志可以为大写字母，小写字母，罗马字母等等。

   <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   </ol>
   

   9. 表格

   <form>
     <!-- 文本框，注意有 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>
   

   当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

   10. 区块元素

   区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等

   11. 内联函数

   内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

   12. 预设格式

   <pre>,标签中的内容格式将保持不变。

心得：

学习HTML一周了，感觉刚开始有点东西，但是组合起来设计优美的界面却不是那么容易，他需要花费我的很多时间，但是时间本来就是用来打发的，everything，所以我可以做到，关于界面设计，我想好好学，很憧憬，也比较喜欢，上面的一些知识经过这次总结过后，也慢慢变得清晰起来了，还是蛮好的。