总结前端三剑客之一(HTML基础)

今天我们来学习前端三剑客之一(HTML),在讲解HTML之前,我们需要先了解前端三剑客是什么,分别又有什么作用呢?

前端三剑客指的是HTML、CSS、JavaScript,这三门语言。目前大多数网站的前端都是由这三门语法写的,他们之前相互搭配进行使用,就能够显示出很多丰富的效果。而他们三者的作用就像是这样的:

  • HTML,像骨头一样,撑起了整个页面的大致框架,比如左边需要一个输入框,右边需要一个按钮之类的,都可以用HTML来实现。
  • CSS,而HTML实现出来的样式比较单调,CSS就是为它进行“化妆”的,也就是做到美化的效果。
  • JavaScript,与用户进行交互,将用户的行为提交到后台服务器等。

image-20220124191829232

一、认识HTML

HTML 代码是由“标签”构成的。

<p>
    这是一个段落标签
</p>
  • 标签名放在<>中,如上,p就称为段落标签
  • 大部分的标签都是成对出现的,如<p>称为开始标签</p>称为结束标签
  • 极少数标签只有开始标签,称为单标签
  • 开始标签和结束标签之间的数据,称为内容。例如上诉的代码会显示“这是一个段落标签”,这句话。
  • 开始标签中,可以设置一些属性,比如id、name等
<p id="p1">这是一个段落</p>

HTML文件的大致构成如下:

image-20220124193317749

标签层次关系

  • 父子关系
  • 兄弟关系
<html>
    <head>
    	<title>第一个页面</title>
    </head>
    <body>
    	hello world
    </body>
</html>

上诉代码中,head和body标签,都是在html标签的直接下级,这样的情况,html标签就是二者的父标签;而head和body标签同是html标签的子标签,二者就是一个兄弟关系

二、常见的HTML标签

1、注释标签

HTML的注释标签,更java语言的注释,完全不一样,如下

<!--这是一个注释标签 -->

在VSCode编辑器中,可使用ctrl + /,快速进行注释/取消注释。

这样的标签,使用时避免进行嵌套使用

2、标题标签

有六种标题大小的标签,数字越小,字体越大

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

展示的效果就是这样的:

image-20220125150243840

3、段落标签

人如其名,这个标签就是表示一个段落的标签。

<p>
    彭于晏,1982年3月24日出生于台湾省澎湖县,毕业于不列颠哥伦比亚大学,加拿大籍华裔影视男演员、歌手。
    
2002年,    因出演个人首部电视剧《爱情白皮书》 ,从而进入演艺圈 [1]  。2005年,因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年,主演剧情片《六号出口》。2007年,凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员,并为金马短片单元制作片头,完成了个人导演处女作 [2]  。2009年,发行个人首张EP《非爱不可》。
    2011年,彭于晏凭借励志片《翻滚吧!阿信》提名第48届台湾电影金马奖最佳男主角 [3]  。
</p>

展示结果如下:

image-20220125150636933

尽管我们在p标签里面加了换行和多个空格,到最后,在浏览器展示出来的样式,其实还是一个段落。此时的多个空格和换行,会自动转换成一个空格。

  • p标签之间存在一个空隙
  • 当前的p标签所展示的段落,还没有缩进。(CSS可以搞缩进)
  • 可以自动根据浏览器的宽度来决定排版
  • 在HTML中的文字之间输入多个空格,最终也只会展示一个空格的
  • HTML中输入一个换行,也只会展示成一个空格

4、换行标签

在p标签中,我们说直接输入换行,是没有效果的。此时用一个换行标签,就能达到换行的效果。

<br> 或者 <br/>

以上两个都是换行标签,后者更为规范一点。

<p>
    彭于晏,1982年3月24日出生于台湾省澎湖县,毕业于不列颠哥伦比亚大学,加拿大籍华裔影视男演员、歌手。
    2002年,因出演个人首部电视剧《爱情白皮书》 ,从而进入演艺圈 [1]  。2005年,因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年,主演剧情片《六号出口》。2007年,凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员,并为金马短片单元制作片头,完成了个人导演处女作 [2]  。2009年,发行个人首张EP《非爱不可》。
    <br>2011年,彭于晏凭借励志片《翻滚吧!阿信》提名第48届台湾电影金马奖最佳男主角 [3]  。
</p>

image-20220125152246532

5、格式化标签

会字体进行一个格式化的操作,就如下几个标签:

  • 加粗:strong标签和b标签
  • 倾斜:em标签和i标签
  • 删除线:del标签和s标签
  • 下划线:u标签和ins标签

分别展示的效果就如上。

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

6、图片标签

图片标签:img标签。

这个标签必须带有src属性,表示图片的路径。

<img src="" alt="">

改标签可以设置以下常用的属性:

  • src,图片的路径
  • alt,如果图片加载失败,会显示alt里面的内容
  • title,鼠标悬停在图片上面,会显示title里面的内容
  • height、width,控制高度和宽度,一般只需要修改一个即可,浏览器会自动进行调整
  • border,设置边框,参数就是边框宽度的像素,一般都是由CSS进行设置

7、超链接标签

image-20220125154449318

类似于上图圈起来的字体,鼠标右击-》检查,会打开开发者工具,就能够看到这些都是由超链接标签进行构成的。

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

如上,就是一个超链接标签。href属性也是必须要有的,表示跳转页面的地址,可以是其他网站的网址,也可以是当前网站的其他页面。

链接的几种形式:

  • 外部链接:href指向其他网站的网址

    <a href="https://www.baidu.com/">百度一下</a>
    
  • 内部链接:href指向内部页面之间的链接,写相对路径就可以

    <a href="login.html">登录页面</a>
    
  • 空链接:一般都是用于在写界面时,表示这里有一个超链接标签,就是用来占位的

    <a href="#">占位</a>
    
  • 下载链接:href属性写的是一个文件,当点击的时候,就会下载该文件

    <a href="test.txt">测试文件</a>
    
  • 网页元素链接:可以将一个图片,设置一个链接

    <a href="https://www.baidu.com/">
        <img src="image/wallhaven-r7krmq.jpg" alt="">
    </a>
    
  • 锚点链接:可以快速的定位到页面的某个位置;(比如看小说时,点击某个章节,就能快速跳转到正文)

    <a href="#one">第一季</a>
    <a href="#two">第二季</a>
    <a href="#three">第三季</a>
    
    <p id="one">第一季内容……</p>
    <p id="two">第二季内容……</p>
    <p id="three">第三季内容……</p>
    

    当某个标签,当前没在屏幕显示时,点击链接,才能看到跳转的效果。

8、表格标签

  • tabel标签:表示整个表格
  • tr标签:表示表格的一行
  • td标签:表示单元格,也就是表格的一列
  • th标签:表示表头单元格,会居中加粗字体
  • thead标签:表格的头部区域,就是表格的标题,比如“核酸检测报告表”。(注意与th区分,范围比th要大)
  • tbody标签:表格的主体区域

表格标签还有一些属性,但是一般都用不到,都是用CSS进行设置样式的。

以下这些属性,都是要放在table标签里面的:

  • align是表格相对于周围元素的对齐方式,align=“center”(切记不是内部元素的对齐方式)\
  • border表示边框,“1”表示有边框(数组越大,边框越厚),“”表示没有边框
  • cellpadding:内容距离边框的距离,默认是1像素
  • cellspacing:单元格之间的距离,默认是2像素
  • width/height:设置长宽

以上这几个属性,VSCode不会提示的

举个例子:

<table  width = "300px" cellspacing="0" border="1px" >
    <thead>核酸检测表</thead>
    <tbody>
        <!-- 这是第一行 -->
        <tr>
            <!-- th标签,首行标签,会加粗和居中字体 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>职位</th>
        </tr>
        <tr>
            <td>彭于晏</td>
            <td>39</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>胡歌</td>
            <td>39</td>
            <td>演员</td>
        </tr>
    </tbody>
</table>

image-20220125162625485

还有一个知识点就是合并单元格

  • 跨行合并:rowspan=“n”
  • 跨列合并:colspan=“n”

n表示合并n个单元格,跨行合并,就将属性插入tr标签中;跨列合并,就将属性插入td标签中。

9、列表标签

列表标签分为有序标签和无序标签,展示出来的格式如下:

  1. 这是有序标签
  • 这是无序标签

无序标签,使用ul标签;有序标签使用ol标签,有序和无序标签。还有一个自定义标签,使用dl标签,dl标签里面只能使用dt(小标题)和dd(描述小标题的正文).

有序标签和无序标签的注意事项:

  • 元素之间是并列关系
  • ul/ol标签里面,只能放li标签;dl里面只能放dt和dd标签
  • li标签里面不能放其他标签
  • 这些列表都有自己的样式,还可以使用CSS修改样式
<ul>
    <li>这是一个无序标签</li>
    <li>这是一个无序标签</li>
    <li>这是一个无序标签</li>
</ul>

<ol>
    <li>这是一个有序标签</li>
    <li>这是一个有序标签</li>
    <li>这是一个有序标签</li>
</ol>

<dl>
    <dt>这是自定义标签的标题</dt>
    <dd>这是自定义标签</dd>
    <dd>这是自定义标签</dd>
    <dd>这是自定义标签</dd>
</dl>

10、表单标签

表单是让用户输入信息的重要途径。

分为两个部分:

  • 表单域:包含表单元素的区域,重要的是form标签
  • 表单控件:输入框,按钮之类的,重点是input标签

1)、form标签

<!-- 提交按钮 用于form标签中,用于跟后台的服务器进行交互使用 -->
<form action="https://www.baidu.com/">
    <input type="text" name="username">
    <input type="submit"> 
</form>

<!-- 清空标签 也是必须在form标签中使用,用于重置用户输入的数据-->
<form action="https://www.baidu.com/">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" name="submit">
    <input type="reset" name="reset">
</form>

作用:描述了要把数据按照什么方式,提交到哪个页面中去。form标签需要结合服务器和网络编程进行使用,具体的用法,我们以后再说。

2)、input标签

input标签就厉害了,可以变为各种输入控件、单行文本框、按钮、单选框、复选框。

<input type="text" name="" value="">
  • type(必须要有),取值种类有很多种,button、checkbox、text、file、password、radio等
  • name:给input起个名字(对于单选按钮来说,具有相同的name才能实现多选一)
  • value:input中的默认值
  • checked:默认被选中(用于单选按钮和多选按钮)
  • maxlength:设置最大长度
  1. 文本框

    <input type="text">
    
  2. 密码框

    <input type="password">
    
  3. 单选框

    <!-- 性别 默认选中的是男-->
    <input type="radio" checked="checked"><input type="radio">
  4. 复选框

    <input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">打游戏
    
  5. 按钮

    <!-- 当前按了 没效果-->
    <input type="input" value="这是一个按钮">
    <!-- 以弹窗的形式,显示hello -->
    <input type="input" value="hello world" onclick="alert('hello')">
    

    还可以搭配form标签进行使用:

    <form action="https://www.baidu.com/">
        <!-- 用户名-->
        <input type="text" name="username">
        <!-- 密码-->
        <input type="password" name="password">
        <!-- 提交按钮-->
        <input type="submit" name="submit">
        <!-- 重置按钮-->
        <input type="reset" name="reset">
    </form>
    
  6. 选择文件

    <input type="file">
    

    点击选择文件,就是弹出选择文件的位置,类似的上传头像就是这样的操作。

    image-20220125172039937

3)、label标签

label标签,为了提升用户的体验。在实际生活中,我们需要填写很多表格,在手机上,那个单选框很小,不是很容易被点击到。

而label标签就是将单选框的内容也设置了,我们点击内容就能够选中这个单选框。比如点击“男生”这两个字,就能够选中这单选框。

image-20220125172329328

用法如下:

<input type="radio" id="male" name="sex"> 
<label for="male">男生</label>
<input type="radio" id="female" name="sex"> 
<label for="female">女生</label>

将两个单选框设置一个di,每一个单选框对应一个label标签,label标签的for属性就填单选框的id号。两个单选框设置一个相同的name属性(sex),这样的话,我们就只能实现“单选”的效果

4)、select标签

select标签,也就是我们平时说的下拉菜单

<select>
    <option selected="selected">打游戏</option>
    <option>睡觉</option>
    <!-- selected表示默认被选中的 -->
    <option>吃饭</option>
</select>

展示的效果是是这样的:

image-20220125173049176

单击它,就可以选择其他选项。

5)、textarea标签

这个标签,用于写一些内容,比如评论区类似的,一般都是由这个标签写的。

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

rows和cols一般也是不会这样使用的,一般由CSS来修改。文本域的内容,就是默认的内容。

image-20220125174115393

11、无语义标签

  • div标签,division的缩写,表示分割
  • span标签,表示 跨度

这两个标签,主要用于网页布局,div标签会独占一行,称为块级元素;span标签不独占一行,他的大小会根据他里面的内容而定,称为行内元素

无论是块级元素还是行内元素,都可以通过CSS进行修改,二者可以相互转换。

<div>div标签会独占一行</div>
<span>span标签不会独占一行,比如后面可以再写一个button</span>
<input type="button" value="这是一个按钮">

image-20220125174847806

注意:行内元素不能设置长宽,因为他的长宽会根据它显示的内容而定。如果非要自定义长宽,那么就需要转换为块级元素。

常见的行内元素:span、a、img、input、textarea、br、b、strong等

常见的块级元素:div、table、form、ul、ol、dl等

好啦,本期更新就到此结束啦,我们下期再见吧!!!

  • 16
    点赞
  • 65
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听雨7x

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值