HTML入门

最新推荐文章于 2022-05-27 23:45:41 发布

劉某人゜

最新推荐文章于 2022-05-27 23:45:41 发布

阅读量150

点赞数

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44953728/article/details/101107491

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.概述

1.HTML是什么

html是超文本标记语言(HyperText Markup Language)
超文本:超出文本范畴,功能闭文本强大
标记语言:语法由标签组成

学习HTML的核心就是学习标签

2.HTML可以做什么

设计页面,做网页

3.HTML的结构

<html>
	<head>
		<title>标题</title>
		//外部的引入文件 css, js
		//配置: eg 编码
	</head>
	<body>
		//展示的内容
	</body>
</html>

3.1 head标签

一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到.

作用
指定网站的标题
指定网站的关键字/指定网站的描述信息
外挂一些外部的css/js文件
添加一些浏览器适配相关的内容

3.2 title标签

作用
专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点:
title标签必须写在head标签里面

3.3 body标签

作用
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中.
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

4.html语法规范

扩展名是html或者htm
html标签不区分大小写

<p></p>
<P></P>

---------------------------------
<p></P>
<P></p>

html由头(head)和体(body)组成
标签是可以嵌套的,标签里面可以放标签

<p><font>哈哈</font></p>

标签一般由起始标签开始，结束标签终止。但是如果标签不修饰内容，可以在标签里结束。br, hr, img

<p>标签的内容</p>  --标签里面需要写内容

<br/>             --标签里面不需要有内容, 以在标签里结束

5.标签属性

属性是属于标签的，修饰标签，让标签有更多的效果
属性一般定义在起始标签里面。 hello
属性一般以属性=属性值的形式存在
属性值一般用 ‘’或者“ ”括起来。不加引号也是可以的.(不建议使用)

6. 排版标签

字体标签

<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>

标题标签

<hn>标题<hn>  n取值1~6, 1是一级标题, 2是二级标题...

段落标签

<p>段落</p>
注意：
	段落之间自动进行换行

粗体标签

<b>内容</b>

斜体标签

<i>内容</i>

下划线标签

<hr/>

换行标签

<br/>

Ctrl+Shift+/: 注释快捷键

7. 图片标签

img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片

语法:
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>

示例代码

    <!--掌握: src属性: 图片的路径; width属性:指定图片的宽度 ; height属性: 指定图片的高度;
        了解: alt属性: 图片的描述(只有图片显示错误的时候才有效果); title属性: 鼠标放上去显示的标题-->
    <img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/>

7.1 路径问题

相对路径

相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

同级

同级就是"图片"和".html文件"存储在同一个文件夹中

格式: src="QRCode.jpg"

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

上级

上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

格式: src="../QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫QRCode.jpg, 其中../ 代表找到当前文件夹的上一级文件夹

绝对路径

绝对路径就是每次都从指定的盘符开始查找.

- 绝对路径注意点:

1.路径中不要出现中文, 否则可能出现未知问题

2.如果是通过"相对路径"来指定图片, 不能跨盘符,例如.html文件在C盘, 那么不能去查找D盘图片

8.列表标签

8.1无序列表

语法

 <!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形-->
 
<ul type="类型">
    <li>需要显示的条目内容</li>
    ...
</ul>

注意点
ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.
li要定义在ul里面
应用场景
新闻列表
商品列表
导航条

8.2 有序列表

语法

    <!--一,有序列表 ol
        start属性: 起始的索引(默认是第1个)
        type属性: 列表类型;  1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
    -->
    
<ol type="类型" start="起始索引">
    <li>需要显示的条目内容</li>
    ...
</ol>

9.超链接标签

9.1超链接标签的基本使用

超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的

超链接标签的格式:
		<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
target属性取值: 
		_blank：新起页面
		_self：当前页面（默认）

    <!--href属性: 跳转的路径(可以是本地的也可以是远程的)
        target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
    -->

    <a href="http://www.baidu.com" target="_self">百度</a>

假链接

就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接替换为真链接

<a href="#">这是一个假链接</a>

10.表格标签的使用

在过去表格标签用的非常的多, 绝大多数的网站都是使用表格标签来布局.表格标签类似Excel.

语法:
<table border="1px" width="" height="" bgcolor="" align="">
    <tr>
        <td>需要显示的内容</td>
    </tr>
</table>
1.解释说明
	table标签代表整个表格
	tr标签代表是表格中的一行
	td标签就是一行中的一个单元格
2.注意点
	表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
	表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
	tr定义在table里面, td定义在tr里面

表格中的属性
合并单元格

删除要合并的单元格，只留一个(最前方)
设置colspan或者rowspan属性，几个合并，值就是几

表格的其它标签

<table>
	<caption>表格标题</caption>
	<tr>
        <th>第一列的标题</th>
        <th>第二列的标题</th>
        <th>第三列的标题</th>
    </tr>
    ...
</table>

1.caption表格标题
	在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.th列标题
	在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

表格的完整结构

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

表格容易错的地方

<body>

    <table>
        <tr></tr> <!--不算规范的表格, 就算是一行一列, td是不能少的-->
    </table>

    <table>
        <tr><td></td></tr> <!--这才是一行一列-->
    </table>

    <table>  <!--不要这么写,tr定义在table里面的, tr里面只放td; td里面才放内容-->
        哈哈
        <tr>
            哈哈
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>


</body>

11. 表单标签

作用: 把用户输入的数据提交到服务器
通过form来定义

<form action="http://www.baidu.com" method="post">
	...
</form>

常用属性

action:提交路径,默认是当前页面,#

method:提交方式,常用的是get和post. 默认就是get

get和post区别

1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的

11.1 form的常见子标签

input:输入域, 通过type属性来指定类型

select :选择列表

textarea：文本域

input：输入类型

<input type="xxx"/>

type属性,类型是由属性（type）定义的

- text:文本输入框
- password:密码域
- submit：提交按钮
- reset：重置按钮
- button:空白按钮
- radio:单选框
- checkbox:复选框
- hidden:隐藏字段
- file:文件

select :选择菜单

<select name="">
	<option value="">显示的内容</option>
</select>

option：选择菜单的选项

注意：

name在select里面指定
value在option里面指定
option定义在select里面

textarea:文本域

<textarea rows="20" cols="30" name="introduce"></textarea>

属性：

cols列
rows:行

11.3 通用属性

name

作为单选和多选框的分组
作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性

value

给按钮起名字
设置提交到服务器的值 name=value

11.4 设置默认值

text,password:通过value属性

用户名: <input type="text" name="username" value="zs"/>

radio checkbox:通过checked属性

性别: <input type="radio" name="sex" value="1"/>男
      <input type="radio" name="sex" value="0" checked="checked" />女

select :在option上通过selected属性

籍贯: <select name="address">
        <option value="sz">深圳</option>
        <option value="bj">北京</option>
        <option value="sh" selected="selected">上海</option>
    </select><br/>

textarea:直接在标签体中写

自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>

11.5 HTML5中新增的type类型

<input type="xxx"/>

注：不同的浏览器支持上有差异，有些浏览器依然不支持在这里插入图片描述

11.6 placeholder:用户提示

    用户名: <input type="text" name="username" placeholder="请输入用户名"/><br/>

12.HTML扩展

12.1 回到顶部

锚点:
锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。

在html里面锚点的作用: 通过a标签跳转到指定的位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a id="aId"></a>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
<img src="../img/banner_1.jpg" width="500px" height="2000px"/>

    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <a href="#aId">回到顶部</a>

</body>
</html>

12.2 图片链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://www.baidu.com">
    <img src="../img/b.jpg"/><br/>
    百度
</a>

</body>
</html>

12.3 video标签

video标签的作用是用来播放视频

<video src="视频的资源">
</video>

在这里插入图片描述

12.4 audio标签

audio标签的作用是用来播放音频
在这里插入图片描述

12.5 详情和概要标签

利用summary标签来描述概要信息, 利用details标签来描述详情信息. 默认情况下是折叠展示, 想看见详情必须点击

<details>
    <summary>概要信息</summary>
    详情信息
</details>

劉某人゜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

一.概述1.HTML是什么html是超文本标记语言(HyperText Markup Language)超文本:超出文本范畴,功能闭文本强大标记语言:语法由标签组成学习HTML的核心就是学习标签2.HTML可以做什么设计页面,做网页3.HTML的结构<html> <head> <title>标题</title> /...
复制链接

扫一扫

专栏目录