前端基础知识html

发布于:2024-03-29 ⋅ 阅读:(19) ⋅ 点赞:(0)

一.基础标签


1.<h1>-<h6>:定义标题,h最大,h最小
2.<font>:定义文本的字体,尺寸,颜色
3.<b>:定义粗体文本
4.<i>:定义斜体文本
5.<u>:定义文本下划线
6.<center>:定义文本居中
7.<p>:定义段落
8.<br>:定义折行
9.<hr>:定义水平线

                             1.定义标题

7def66c14a77423aa84332fb8e34ee3b.png

 运行结果

2a35efb352c64d6687a40379cafec107.png

 

  2.定义水平分割线7a2fd40dba0d41fc9a4335ebd9a79878.png

 运行结果:086ae01cbbfe4263936114b335140228.png

 3.定义文本的字体,尺寸,颜色e89cf6a9bf404b9694b365d58e72d0f9.png

 运行结果:

02b1ff0e0c3a4215a99ebd3e9feda9af.png

 

        4.段落标签,单独占一行7999d4ca99a344ed9edf54f6bef173e5.png

 运行结果:a8b0d24e8aaa448e90195d2dc6d7bbfc.png

 

       5.定义粗体/斜体/下划线,删除线文本be2e68807e9c4d849ff93f40c8a3d13b.png

 运行结果:cd2bb90be45c40d28a8c6f12400edf80.png

                二.图片,音频,视频标签

1.img:定义图片
①src:规定显示图像的URL
②height:定义图像的高度
③width定义图像的宽度

2.audio:定义音频。支持的音频格式:MP3,WAV,OGG
①src:规定音频的URL
②controls:显示播放控件

3.video:定义视频。支持的音频格式:MP3,WedbM,OGG
①src:规定视频的URL
②controls:显示播放控件

1.图片a5b76ebe15e34bacb0b4a16b6083bf7e.png

 运行结果:3d1f8b23e35d48f8b636cb0b8e93286c.jpg

   2.音频,视频be676e82a7f242bba2fa384647639ec5.png

 运行结果: 0314866bdf1f45acaf45662fb66dae04.jpg

 注意:尺寸问题,不然就是像这样,太大了,不美观。b0b89b3c8c6f48a8b1b88d23da002225.png

 解决办法:所有我们需要设置高和宽

72fbe45d740542409fd9ff4067ae07dc.png

 运行结果9b86a4c2c53e47adb7f72d134c3591ec.jpg

 绝对路径展示步骤:

第1步,打开浏览器,找到百度,随便一张图片(自己喜欢的)

f6048c65ec3840c7bad35280f34239f8.jpg

 第2步选择复制图片地址,这个就是它的绝对路径了。

第3步,去vsdeco里面运行

d6e0079cb8d94d328b0140c563ab2498.png

运行结果:

6609be39abcb4a62bba7b44c211c5af2.png

                      3.超链接标签

超链接标签:<a>定义超链接,用于链接到另一个资源。
①href:指定访问资源的URL
②target:指定打开资源的方式。
a:_self:默认值,在当前页面打开。
b:_blank:在空白页面打开

05d2fa0c8e0d4d1ca57b0f79ee8b50a9.png

 37cd7ea7936e44ce9ab8970084d66bdf.png

 运行结果:

2d0890084b184ec0a0d8d6cef9a5319e.png

                         4.列表标签


<li>:定义列表项
<ol>:定义有序列表用这个
<ul>:定义无序列表用这个

例子:
有序列表(order list):
<ol>
      <li>咖啡</li>
      <li>茶</li>
      <li>牛奶</li>
</ol>
无序列表:
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

如图所示:5b2b4fa6b8b94095bc9eaf07465e68f8.png

 运行结果:

dc22e65b438e49d9b6966be688e90e29.png

                             5.表格标签
1.table:定义表格
①borderz规定表格边框的宽度
②.width:规定表格的宽度③cellspacing:规定单元格之间的空白。
2.定义行
①align:定义表格行的内容对齐(center居中)
3.定义单元格:
①.rowspan:规定单元格可横跨的行数
②colspan:规定单元格可横跨的列数
1.<table>定义表格
2.<tr>定义行
3.<td>定义单元表格
4.<th>:定义表格单元格

1d65029f48824c9cad49c85b56a197c2.png

a833696b33784539b7380af752bccde0.png 

 运行结果:bd8bdb7628634c8697248c95b7849a11.png

其他效果展示代码如图9a44794c37c241c8abeeb58f7a0c0b43.png

 1a49796174de49c1802b5582b6472479.png

 其他代码运行结果总图:58c6eac05d844cf79f0d7a731d83c3ff.png

                       6.布局标签

布局标签:
①<div>:定义一个html文档中的一个区域部分,经常与CSS一起使用,用来布局网页
②<span>:用于组合行内元素

78d36b917ca94e8a96be0464eced7827.png

 运行结果如图e3bfadc5f1b848698d34e62f16cb8939.png

                        7.表单标签


表单:在网页中主要负责数据采集功能。
使用<form>标签定义表单单项(元素):不同类型的input元素,下拉列表,文本域等。

标签:
1.<form>:定义表单
2.<imput>:定义表单项,通过type控制输入形式
3.<label>:为表单项定义标注
4<select>:定义下拉列表
5<option>:定义下拉列表的列表项
6<textarea>:定义文本域

<form>:定义表单
①action:规定当提交表单时向何处发送表单数据的方式
②method:规定发送表单数据的方式
a:
get:浏览器会将数据直接附在表单的action URL之后。大小有限制。
b:
post:浏览器会将数据放到http请求消息体中。大小无限制391c931fb1f74086bb3332d3ecbee43d.png

 运行结果:28517fd7c6f74f22a94e7f296df5c03e.png

                   8.表单项标签-表单项(番外篇)

表单项标签-表单项:
①<input>:表单项,通过type属性控制输入形式。
②<select>:定义下拉列表,<option>定义列表项。
③<textarea>:文本域

type取值:
①text:默认值,定义单行的输入字段
②password:定义密码
③radio:定义单项按钮
④checkbox:定义复选框
⑤file:定义文件上传按钮
⑥hidden:定义隐藏的输入字段
⑦submit:定义提交按钮,提交按钮会把表单数据发送到服务器。
⑧reset:定义重置按钮,重置按钮会清除表单中的所有数据
⑨button:定义可点击按钮d33697393b3b491198ce79eaf6255d30.png

 4159e5eca0834cc089d1517e7b65733d.png

 f9c5234c13c043e1955f86f5838d08c6.png

 9bc3abe3f70e49a88c8ac2c488828da8.png

运行结果:e05536d8aaab49baa83ac97212a92ee0.png

 

 

本文含有隐藏内容,请 开通VIP 后查看