当前位置:首页 » 《关于电脑》 » 正文

【前端】01.HTML

20 人参与  2024年10月08日 10:40  分类 : 《关于电脑》  评论

点击全文阅读


一、什么是前端

一个软件通常情况下是由后端+前端完成 ,Web前端就是用来呈现给用户的一个一个的页面。
在我们生活中常见的前端页面:Web页面、PC端程序页面、移动端APP页面

二、什么是HTML页面

HTML是超文本标记语言
超文本: 文本、声音、图片、视频、表格、链接
标记: 由许许多多的标签组成
HTML页面是运行在浏览器上的

三、HTML标准界面

<html>    <head>        <title>这是一个标题</title>    </head>    <body>        这是内容    </body></html>

双标签:标签有开始有结束
单标签

我们可以看到其结构实际上是一个DOM树,所有的标签都是html的子标签,head和body是兄弟标签,head和title是父子标签,每个标签就相当于是一个对象,我们就可以通过代码拿到这些对象进行增删查改操作。

在VScode中!+回车可以快速生成基本框架

四、HTML标签

4.1 注释标签

Ctrl+/就能完成注释

4.2 标题标签

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

数字越大字体越小越细

4.3 段落标签

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

4.4 换行标签

 <br/>

br标签是一个单标签。换行标签的间隙比段落标签的间隙小 。

4.5格式化标签

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

4.6 img标签

4.6.1 src属性

img标签必须搭配src使用(指定图片路径),相对路径/绝对路径

4.6.2 alt属性

alt后面的文案只有当图片加载出错时才会显示,加载成功这个文案就不会显示

4.6.3 title属性

鼠标放在图片上时显示title后面的文案

4.6.4 width/heigth属性

改变图片的像素大小,单位px

4.6.5 board属性

给图片加边框,单位px

4.7 a标签(超链接标签)

4.7.1 herf属性

跳转到指定链接,点击里面的文本或图片即可跳转

4.7.2 target属性

在新的页面打开指定链接。target打开方式默认时self,用blank则是用新的标签页打开

4.8 表格标签

table标签: 表示整个表格
tr标签: 表示表格的一行
td标签: 表示一个单元格
th标签: 表示表头单元格,会加粗居中
thead标签: 表格的表头区域,内容居中加粗
tbody标签: 格的主体区域

属性:
align:表格相对于周围元素的对齐方式,align=“center”(不是内部元素的对齐方式)
boeder:表示边框
cellpadding:内容距离边框的距离,默认为1px
cellspacing:单元格之间的距离,默认为2px
weith/hright:设置宽度/高度

rowspan:合并行单元格
colspan:合并列单元格

4.9 列表标签

4.9.1 无序列表

<ul><li>这是内容1</li><li>这是内容2</li></ul>

type属性:disc(实心圆)、square(实心块)、circle(空心圆)

4.9.2 有序列表

<ol><li>这是有序列表1</li><li>这是有序列表2</li></ol>

type属性:a(小写英文字母编号)、A(大写英文字母编号)、i(小写罗马数字)、I(大写的罗马数字)、1(数字)
start属性:从指定位置开始

4.9.3 自定义列表

<dl><dt><dd>自定义列表</dd></dt></dl>

4.10 表单标签

用表单标签来完成服务器的一次交互

4.10.1 表单域标签

<form> </form>

action标签: +服务器地址

4.10.2 表单控件

input标签
通过对type取值不同完成控制input类型
type属性: text:文本框password:密码radio:选择框,name=“”,当name值一样时就变成单选框了,checked="checked"默认值checkbox:复选框button:普通的按钮,value=“”,显示文字,搭配JSsubmit:提交按钮reset:清空控制框内容file:提交文件 lable标签
将元素进行关联
for:通过for属性里的内容进行关联select标签 option标签
value属性
selected表示默认被选中 textarea标签
文本框无语义标签
无语义没有固定的用途,拿着这个标签啥都能干 div是独占一行的,是一个大盒子span没有独占一行,是个小盒子

五、HTML中的特殊标签

空格:&nbsp;
小于号:&it;
大于号:&gt;
按位与:&amp;


点击全文阅读


本文链接:http://zhangshiyu.com/post/168878.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1