前端三剑客 - HTML

发布于：2022-12-13 ⋅ 阅读:(753) ⋅ 点赞:(0)

前言

接下来的时间将会给大家带来前端的相关知识,主要是做到扫盲的效果,在后面我们自己做网页时会用到前端三剑客HTML,CSS,JavaScript对网页进行布局,美化.

💥编译软件: Edge,Chrome.FireFox等浏览器.

💟编辑软件: VsCode

🍓参考文档:MDN

1.初始HTML

HTML(Hypertext Markup Language)超文本标记语言,它诞生就是为了给静态页面例如报纸进行排版编写,不是编译语言(Java,C/C++),而是一种定义内容结构的标记语言.随着技术不断创新发展,原有的HTML已经不能满足人们需求,所以出现CSS(页面格式修饰),JavaScript(页面逻辑控制)使我们的网页变得缤纷多彩.

1.1第一个HTML

创建一个记事本,并写入Hello HTML,修改后缀为html,打开方式为Edge.

image-20220910213913456

于是第一个html文本就创建成功啦.

在浏览器中使用F12,进入开发者模式,查看网页信息,可以看见,

image-20220910215104796

我们只写入了Hello HTML但是浏览器会对代码进行补全.

在开发者模式中,我们可以使下面这个箭头对页面信息进行查询.

image-20220910215531451

可以修改内容(但是这种修改是对真正数据没有影响)

image-20220910220032724

还可以查看网站彩蛋

image-20220910220138930

image-20220910220230128

image-20220910220419006

那么常规的HTML文档是如何编写的呢?

1.2HTML的构成

HTML由一系列的标签构成,而标签中包裹的就是大量的元素.例如

<!DOCTYPE html>
<head>
	<title>这是一个标题</title>
</head>
<body>
    hello world
</body>
</html>

image-20220910221059965

这里的:

  • !DOCTYPE 用来链接HTML编写规范库,比如检错功能
  • <html> </html> 包含整个页面的内容
  • <head></head> 包含对字符编码规范,CSS样式表,页面描述等等.
  • <title></title>设置页面标题
  • <body></body>提供给用户查看的内容,例如文本,视频…

当前由于记事本功能的局限性,使用建议大家使用VSCode,其提供了强大的编辑功能.

在新建成功一个html文件后,输入!后出现提示后,回车既可以为我们自动创建一个模板

image-20220910222951403

下面将详细认识一些常见标签

2.HTML常见标签

2.1 注释标签

格式:

<!---->

image-20220910223704746

可以看见注释不会在网页上显示,但是会在元素查看器中看见.

和idea,VS2016相同可以使用ctrl + /对代码进行注释/取消注释

2.2 标题标签

格式:

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
image-20220910232452833

规则: 数字越小,字体大.

2.3 段落标签

格式:

<body>
    <p>段落1Lorem, ipsum dolor sit amet consectetur adipisicing elit.Quia ducimus unde labore sint perferendis repudiandae nihil quas harum fugit, delectus in commodi illo inventore, beatae laudantium nobis error nulla maxime!</p>
    <p>段落2Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias sed excepturi aliquid perspiciatis odio fugit neque harum nobis porro, repellat magni iste voluptates ab corrupti, tempora, molestiae nam iure rerum.</p>
    <p>段落3Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore deserunt molestias impedit necessitatibus aspernatur ad, iure magni commodi tempora, dolor, et laudantium! Natus excepturi sunt sapiente repellendus a, assumenda iure.</p>  
</body>

在vscode中可以使用lorem生成一段随机文字用于测试.

注意:

  • p标签的内容是一个块级元素,所以上下段落之间会留有空隙

  • p标签会对文本中的空格数进行控制

    • image-20220910233942705

    • 如果要使用多个空格,可以使用转义字符.

      • 字符 转义字符
        & &amp;
        < &It;`
        空格 &nbsp;
        > &gt;
        ‘’ &quot;
        @ &copy;

  • 如果要对每个段落实现2空格的格式,可以使用空格,也可以使用css

    • image-20220911000320753
    • image-20220911000612053

2.4 换行标签

对于<p> </p>``<h></h>都是成对出现的,分别叫做开发标签和闭合标签.但是还是存在单独存在的标签.例如这里的换行标签<br>

示例:

image-20220911002616011

2.5 水平线标签

示例:

image-20220911002751789

2.6 格式化标签

常见的格式化标签有加粗,倾斜,删除线,下划线

image-20220911003531106

可以看见这些内容都显示在一行上,这是因为格式化标签是行内元素(不独占一行)

当然这些效果都可以通过CSS实现.

2.7 图片标签

img标签是一个单标签,其相关属性如下

  • src :图片的地址,可以是本地地址,也可以是网络地址
  • alt: 图片加载失败后鼠标放到失败图片所显示的内容
  • title: 图片的标题
  • width: 图片宽度
  • height: 图片高度

示例:

image-20220911222124851

这里图片是和文件在同一目录下,可以使用./Op.jpg和Op.jpg的相对路径标识图片地址,也可以使用绝对地址和网络地址.

image-20220911222820833

image-20220911222855358

当图片地址失效或者出错时,就会显示alt的内容

image-20220911223034175

2.8 超链接标签

标签属性:

  • href: 点击后跳转的地址
  • target: _self点击后在当前页面进行跳转, _blank创建一个空页面跳转

示例:

image-20220911225054227

image-20220911225210846

对于链接中的地址不仅可以跳转网络地址,还有多种发送

  • 内部链接:

image-20220911225707637

  • 外部链接

image-20220911225949249

  • 空链接

    image-20220911230123418

  • 下载链接

image-20220911230346901

  • 网页元素链接:例如让图片与其创建连接

image-20220911230755028

禁止a标签跳转: <a href="javascript:void(0);">

2.9 表格标签

下面是常见的表格标签

  • table标签: 表示整个表格
  • tr: 表格中的一行
  • td: 表格中的一个单元格
  • th: 表头单元格,字体会默认居中加粗

示例:

但是该表格没有边框,于是可以通过border设置边框

image-20220911233104324

​ 但是表格太小了,于是可以通过width / height 指定

image-20220911233354483

但是内容都不是居中对齐的,这时候就可以通过CSS首先居中

image-20220911233705224

2.10 列表标签

列表分为下面几种.

image-20220911233817777

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>

</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>Java</li>
        <li>Go</li>
        <li>C++</li>
        <li>python</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>Java</li>
        <li>Php</li>
        <li>C++</li>
        <li>Go</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>😀</dt>
        <dd>😁</dd>
        <dd>😊</dd>
        <dd>😥</dd>
    </dl>
</body>
</html>

image-20220911234736649

2.11 表单标签

对用户输入的信息进行处理,主要分为两部分

  • 表单域: 表单控制的区域,主要是form标签
  • 表单控件:填写组件,提交组件,主要是input标签

from标签

<form action="test.html">
... [form 的内容]
</form>

其中描述了其中的内容提交给谁,提交细节等

input标签

属性type的不同其作用也不同

text是单号输入框, password是密码输入框(会对输入内容隐藏), submit是对表单内容提交,value是输入框中默认显示内容

image-20220912001920162

radio是单选框,首先name属性相当于给input取名,所以对于单选框来说,只能选择多个名字相同中的一个,所以一定要设置name属性

checked:默认选择

image-20220912002557190

复选框实现对多个元素的选择

image-20220912003351269

设置按钮触发内置事件

image-20220912003749533

清空按钮对当前form表单内容重置

image-20220912004151967

select标签

select标签提供多个选项,其中可以设置selected=“selected” 来设置默认选项

image-20220912004957985

textarea标签

textarea标签可以实现对多行文本输入

属性:

  • rows和cols,行宽和列高

image-20220912005316534

2.12 无语义标签

  • div标签,表示块级标签
  • span标签,代表元素之间的跨度,是行内元素

3. HTML案例

3.1 展示简历案例

效果图:

image-20220912154730175

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>

</head>
<body>
    <div>
        <h2>基本信息</h2>
        <img src="https://gitee.com/Zzt-xx-up/picture/raw/master/image-20220912152424410.png" alt="个人照片" width="200" height="200">
        <p><span>求职意向: </span>Java开发工程师</p>
        <p><span>联系电话: </span>10086</p>
        <p><span>邮箱: </span>XXX@163.com</p>
        <p><a href="https://gitee.com/Zzt-xx-up">我的gitee</a></p>
        <p><a href="https://blog.csdn.net/weixin_61543874?type=blog">我的博客</a></p>
    </div>
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>XXXX - XXXX XXX小学</li>
            <li>XXXX - XXXX XXX初中</li>
            <li>XXXX - XXXX XXX高中</li>
            <li>XXXX - XXXX XXX大学</li>
        </ol>
    </div>
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>熟悉Java, C/C++语言</li>
            <li>熟悉顺序表,链表,栈,队列,二叉树,堆,哈希等数据结构</li>
            <li>熟练使用数据库的增删查改</li>
            <li>熟悉掌握Web开发,能够独立开发一个简单网页</li>
        </ul>
    </div>
    <div>
        <h2>我的项目</h2>
        <ol>
            <h3>错题本</h3>
            <p>开发时间: XXXX.XX - XXXX.XX</p>
            <p>功能介绍:</p>
            <ul>
                <li>支持错题检索</li>
                <li>支持错题复习</li>
            </ul>
        </ol>
        <ol>
            <h3>留言墙</h3>
            <p>开发时间: XXXX.XX - XXXX.XX</p>
            <p>功能介绍:</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>自主学习能力强,团队协作能力强</p>
    </div>
</body>
</html>

3.2 填写简历案例

效果图:

image-20220912162831090

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>

</head>
<body>
    <table>
        <thead>
            <h3>请填写简历信息</h3>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label for="name">姓名</label>
                </td>
                <td>
                    <input type="text"  id="name">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" checked = "checked" id="man">
                    <label for="gender"><img src="man.png" alt="" width="20px" >男</label>
                    <input type="radio" name="gender" id="woman">
                    <label for="woman"><img src="female.png" alt="" width="20px">女</label>
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <select>
                        <option>-- 请选择年份 --</option>
                        <option>1990</option>
                        <option>1991</option>
                        <option>1992</option>
                        <option>1993</option>
                        <option>1994</option>
                        <option>1995</option>
                        <option>1996</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                        <option>2006</option>
                        <option>2007</option>
                        <option>2008</option>
                        <option>2009</option>
                        <option>2010</option>
                        <option>2011</option>
                        <option>2012</option>
                        <option>2013</option>
                        <option>2014</option>
                        <option>2015</option>
                        <option>2016</option>
                        <option>2017</option>
                        <option>2018</option>
                        <option>2019</option>
                        <option>2020</option>
                        <option>2021</option>
                        <option>2022</option>
                        <option>2023</option>
                        <option>2024</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="1">
                    <label for="1">前端开发</label>
                    <input type="checkbox"  id="2">
                    <label for="2">后端开发</label>
                    <input type="checkbox"  id="3">
                    <label for="3">测试开发</label>
                    <input type="checkbox"  id="4">
                    <label for="4">运维开发</label>
                </td>
            </tr>
            <tr>
                <td>
                    掌握的技能
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    项目经历
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="checked">
                    <label for="chexked">我已经仔细阅读过公司的招聘要求。</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>
        </tbody>
    </table>
</body>
</html>

3.3 Emmets插件

VSCode提供多种快捷键

  • 快速输入标签

input + 回车

  • 快速输入多个标签

h3*3 + 回车

  • 标签自带id

p#one + 回车

  • 标签自带类名

p.one + 回车

  • 标签自带子元素

ol > li*3 + 回车

  • 标签带兄弟元素

li+ol

  • 标签自带内容

li{121}

          <a href="#">点击查看我的招聘状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认: </h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>  
        </tr>
    </tbody>
</table>
```

3.3 Emmets插件

VSCode提供多种快捷键

  • 快速输入标签

input + tab

  • 快速输入多个标签

h3*3 + tab

  • 标签自带id

p#one + tab

  • 标签自带类名

p.one + tab

  • 标签自带子元素

ol > li*3 + tab

  • 标签带兄弟元素

li+ol

  • 标签自带内容

li{121}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布