初学HTML详细全过程

认识HTML标签

HTML文件基本结构 

快速生成代码框架

HTML 常见标签

注释标签

标题标签

段落标签 p 

换行标签 br

格式化标签

图片标签 img

超链接 a标签

外部链接

内部链接

空链接

网页元素链接

下载链接

锚点链接 

表格标签

基本使用

合并单元格

列表标签

无序列表       

有序列表     

自定义列表   

表单标签

form 标签

input标签

label 标签

select 标签

textarea标签

无语义标签: div & span

综合案例:

展示简历信息

填写简历信息

HTML特殊字符编码对照表

HTML结构

认识HTML标签

首先我们来写一个hello world吧

第一种你可以只用简历一个将后缀改为html 里面直接打hello

很简单的就完成了 

 这样做确实不够规范，但足以体现其鲁棒性。

什么又是鲁棒性呢？

按我们老师讲的就是，你对它越祖鲁，它就越棒。属实是话糙理不糙。

HTML文件基本结构 

规范的格式如下

html

大家还是习惯用编译器

这里老铁们idea肯定大部分还是社区版，这块就用起来不是很舒服。

这里使用到的是vscode（界面感觉也是真的很舒服）

可以说是下载到使用从未如此丝滑，大家不用看任何教程直接官网点下载基本就算完事了。

注：默认手动保存，及时保存。

那么下面我们就来到编译器中去正式的来个hello

这块已经是弄好了的

就是老样子先创建个文件然后呢用vscode打开就完事了

来介绍一位开发者们的好伙伴

游览器中有一个非常重要的组件，开发者工具

通过这个发开发者工具，就可以观察到页面的基本结构（F12快捷键/或右键检查）

元素就可以看到页面的结构了

 左上角小箭头点了后就可以选择页面的元素

接下来正正式学习html的各种标签

也可以说学习html就是在学习有哪些标签

HTML描述了页面上有啥东西 

快速生成代码框架

注释标签

先说一下注释

打起来还是挺怪的，先<然后！然后两个-就自动出来了

Ctrl加/切换注释

只有在开发者工具里才可以看到

标题标签

h1 - h6

数字越小，里面内容越组越大，和加标题一样

输入 标签名 tab就可以快速生成一对标签

 HTML初心是为了表示 报纸/杂志

这几种标题 就属于报纸中的重要内容

段落标签 p 

<p>这是一个段落</p>

虽然这些标题是在html中多行编写的，但实际页面中，是按照，单行来展示的。

插入图片（照片本人拍摄）    

将图片粘贴同一文件夹中

换行标签 br

格式化标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

 <img src="dog.jpg" alt="">

        通过src描述图片具体所在的位置

这里的src可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径

     <img src="D:\JAVA\javacode\前端代码\0419\dog.jpg" alt="">
     <img src="dog.jpg"alt=""> 
     <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.RRm37DFe8kQ77yKpE780fwHaCe?pid=ImgDet&rs=1"alt="">

当“中路径出现问题”也就是图片挂了，一个照片裂开的小图标

就可以依靠alt文字描述来说这是啥 

 不同的HTML标签，支持的属性是不一样的

设置尺寸的时候，涉及px. 叫做像素

width="400px"height="300px"

只设置一个方向，另一个方向就会自动等比列缩放

属性不分先后顺序

超链接 a标签

效果就是点击之后能跳转到其他页面

外部链接

<a href="https://www.bilibili.com/video/BV1TY41177QE?spm_id_from=333.1007.top_right_bar_window_history.content.click">10秒7个G！究竟什么瞬间值得用8K RAW来记录！</a>

内部链接

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接

<a href="#">空链接</a>

网页元素链接

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

下载链接

<a href="dog.zip">图片</a>

锚点链接 

点击了之后，是在本页面里面跳转到某个特定的位置

链接与连接的区别

连接（Connection）表示客户端和服务器通信就绪的一种状态

像TCP，虚电路就需要先建立连接

链接（link）快捷方式

表格标签

基本使用

table：表示整个表格

tr：表示一行

td：表示一列

th：表示表头中的一列

合并单元格

      <style>
           td{
               text-align: center;
           }
       </style>
        <table border="2px"width="400px"height="300px"cellspacing="0">
            <tr>
                <td>xx</td>
                <td>01</td>
            </tr>
            <tr>
                <td>xxx</td>
                <td>10</td>
            </tr>
        </table>

这就建立了一个比较草率的原始表格，可加属性

 <table border="2px">width和height来设置表格尺寸，同照片像素操作

使用th标签可给表格加上表头

使用cellspacing属性去掉单元格之间的间隙

（有些操作就需要通过css了）

列表标签

无序列表       

 ul 

有序列表     

  ol        

自定义列表   

 il 

    <h3>无序列表</h3>
         <ul>
             <li>linksphotograph</li>
             <li>影视飓风</li>
             <li>托马斯家的</li>
         </ul>
         <h3>有序列表</h3>
         <ol>
            <li>linksphotograph</li>
            <li>影视飓风</li>
            <li>托马斯家的</li>
        </ol>
        <h3>自定义列表</h3>
        <dl>
            <dt>我喜欢的up主们</dt>
            <dt>linksphotograph</dt>
            <dt>影视飓风</dt>
            <dt>托马斯家的</dt>
        </dl>

表单标签

大部分的html都是给用户展示

表单标签，是让用户来“输入”

form 标签

有个比较好玩的就是大家通过F12可以任意编辑里面的信息

input标签

有很多种形态

  <form>
            <input type="text"><br>
            <input type="password"><br>
            <input type="radio">男
            <input type="radio">女

        </form>

此时男女都可以选

加name=“gender”和checked来使选项确定且唯一

    <input type="text"><br>
            <input type="password"><br>
            <input type="radio"name="gender">
            <label for="">男</label>
            <input type="radio"name="gender"checked="checked">
            <label for="">女</label>

搭配上label的单选

id属性，任意HTML元素，都可以指定id属性，在一个页面中，id的取值不能重复

复选

<form>
    <input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">拍照
    <input type="checkbox">学习
</form>
    

按钮

        <input type="button" value="这是按钮"onclick="alert('hello')">

<input type="file">

点击选择文件，就会弹出一个对话框，就可以选择本地的一个文件，然后，浏览器就会打开这个文件

进一步的就可以实现 提交/上传 文件到服务器

label 标签

select 标签

<select>
    <option>--请选择年份--</option>
    <option>2000</option>
    <option selected="selcted">2001</option>
    <option>2002</option>
    <option>2003</option>
    <option>2004</option>

</select>

使用select表示一个下拉菜单

每个菜单项，是一个option，可以表示selected 来表示默认的选项是啥

textarea标签

多行编辑框

<textarea cols="30" rows="10">

前面的标签，都是有语义的标签，每个标签都有一个明确的角色

无语义标签: div & span

div默认是一个块级元素（独占一行）

span默认是一个行内元素（不独占一行）

综合案例:

展示简历信息

<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--//标记语言 方便游览器自带翻译功能使用-->
<head><!--//页面的一些属性-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>这是标题</title>
</head>
<body>
  <h1>王某某</h1>
  <h2>基本信息</h2>
  <p><img src="dog.jpg" alt="菜狗" title="这是我的照片" width="200px"></p>
<p>求职意向: Java测试开发工程师</p>
<p>联系电话: xxx-xxx-xxxx</p>
<p>邮箱: 6545*****@qq.com</p>
<p><a href="https://blog.csdn.net/m0_56364861?spm=1000.2115.3001.5343">我的博客</a></p>


  <h2>教育背景</h2>
<ol>
    <li>2002 - 2005 xx 幼儿园</li>
    <li>2006 - 2012 xx 小学</li>
    <li>2013 - 2016 xx 初中</li>
    <li>2017 - 2019 xx 高中</li>
    <li>2020 - 2023 XX大学 通信工程专业 本科</li>
</ol>

  <h2>专业技能</h2>
<ul>
    <li>了解Java基础语法,;</li>
    <li>了解常见数据结构;</li>
    <li>了解mysql;</li>
    <li>了解计算机网络;</li>
   
</ul>

  <h2>我的项目</h2>
  <h3>无</h3>

  


  <h2>个人评价</h2>
  <p>普普通通</p>
</body>
</html>

填写简历信息

<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--//标记语言 方便游览器自带翻译功能使用-->
<head><!--//页面的一些属性-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>这是标题</title>
<table width="500px"cellspacing="0"></table>
    <h3>请填写简历信息</h3>
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" id="male" checked="checked">
                
                <label for="male"><img src="./image/男.png" alt="" width="20px"> 男</label>
                <input type="radio" name="sex" id="female">
                <label for="female"><img src="./image/女.png" alt=""
               width="20px">女</label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>  
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>  
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>  
                </select>
            </td>
        </tr>
        <tr>
            <td>
                就读学校
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                应聘岗位
            </td>
            <td>
                <input type="checkbox" id="frontend">
                <label for="frontend">前端开发</label>
                <input type="checkbox" id="backend">
                <label for="backend">后端开发</label>
                <input type="checkbox" id="qa">
                <label for="qa">测试开发</label>
                <input type="checkbox" id="op">
                <label for="op">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea cols="40" rows="20"></textarea>
            </td>
        </tr>
<tr>
    <td>项目经历</td>
    <td>
        <textarea cols="40" rows="20"></textarea>
    </td>
</tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="confirm">
                <label for="confirm">我已仔细阅读过公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认: </h3>
                <ul>
                    <li>
                        以上信息真实有效
                    </li>
                    <li>
                        能够尽快去公司实习
                    </li>
                    <li>
                        能够接受公司的加班文化
                    </li>
                </ul>
            </td>
        </tr>

    </table>
</body>

Emmet快捷键

HTML 特殊字符

HTML特殊字符编码对照表

HTML特殊字符编码对照表 (jb51.net)

参考文档

学习 HTML ：指南与教程 - 学习 Web 开发 | MDN (mozilla.org)

bt课件

小结

写的比较啰嗦，但感觉隔一阵子再看也能保证知道当时写的是啥意思。

有什么不对的地方欢迎各位老铁指正，谢谢。