HTML学习总结

HTML学习总结

一、HTML是什么？

HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果，或功能与行为。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

二、开发工具

开发软件：vs code.
浏览器：chrome

三、用vs code创建HTML及运行于chrome

先创建一个文件夹于存放html及css 文件，如下：
在web_project文件夹下创建一个html文件，注意 .html，如下：

可以点击运行调试，选择chrome 浏览器，此时得到的页面一片空白

四、HTML部分操作实现

基本用法

1.标题：

<h1>~<h6>//从h1到6大小依次减小

2.分段：

<hr>

3.写文本内容：

<p>xxxxxxx</p>

4.超链接：

<a href="https://baidu.com/" > 百度 </a> //href是该超链接的地址

效果图：

5.插图：

<img src="https://......"  width="100"  height="200">

1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.width=“100” 图片宽为100，height="200"高200.
对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验: 点击前往使用.

6.表格：

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

代码中，表示行, 表示行中的单元, 是表头的单元（将会加粗显示），如下效果：

7.无序列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

无序列表使用ul标签
8.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有序列表使用ol标签

9.区块：

<div>Hello</div>
<div>World</div>

div标签为区块元素。

总结

HTML的基本用法还有很多，需要探索学习，我认为学习HTML最好是学以致用，边学边用，掌握起来就很快，还可以从浏览器入手，比如谷歌浏览器，可以查看网页，学习别人网站的设计方法。