web前端学习总结（概念和HTML标签）

最新推荐文章于 2022-09-04 21:51:10 发布

小段爱编程

最新推荐文章于 2022-09-04 21:51:10 发布

阅读量588

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/m0_58061870/article/details/124573569

版权

文章目录

前言
一、基本概念
二、HTML标签
总结

前言

web前端作为计算机专业中较为简单的技能之一，值得我们学习和掌握，俗话说“技多不压身”，何况在当今社会中，就业压力也大，屁话不说了，下面是我总结的web前端知识。

一、基本概念

1，www：是”world wide web“的缩写，也被称为“web”“3w”，中文称为“万维网”。
2，URL：统一资源定位符是互联网上标准资源的地址，其中包括资源位置和访问方法，URL格式基本语法如下：协议：//主机[:端口][/文件]
3，HTTP：是一种最为广泛的网络协议，HTTP传输的数据都是未加密的，而后产生了HTTPS，其作用为数据加密、验证对方身份信息、验证数据的完整性。
4，IP地址：是网络唯一标识符，如身份证。
5，域名：由两个或者两个以上的词构成，由a~z以及阿拉伯数字构成。域名分为一是国家或区域顶级域名，如，中国是.cn等；二是国际顶级域名，如.com表示商业机构，.edu表示教育机构。
6，DNS：是域名系统，由域名解析器和域名服务器组成。
7，静态网页和动态网页：前者是指利用HTML脚本语言编写的标准HTML网页。后者是与web服务器产生交互，用高级语言与HTML结合。

二、HTML标签

1.内联元素

特点：
1、属于行内元素；
2、高宽均不可设置；
3、不会引起换行；
有哪些呢？
1、<br/> 作用换行；
2、<b> 和<strong>作用将文本中的重要的文字，呈现粗体显示；
3、<em>和<i> 作用是将重要的文本，显示为斜体；
4、<del> 作用是对文本的删除；
5、<ins> 作用是对文本的插入；
6、<sub> 作用是定义下标文本；
7、<sup> 作用是定义上标文本；
8、<q> 作用是短引用，在元素周围自动添加引号；
9、<abbr> 作用是用于简写为以句点结束的单词；

2. 块级元素

特点：
1、可以设置宽高；
2、单独在一行；
有以下几个块级元素：
1、<hn>…</hn>标题标签分别有h1、h2、h3、h4、h5、h6作用和在word的作用差不多；
2、<blockquote>长引用作用是对较长的文本自动缩进，对于较长的段落使用该表标签会使得web页面更加的唯美；
3、<pre>预设格式意思是在该标签下你如何写的他不会改变会按照你写的呈现在页面上；
4、自闭表签：<br/>是换行、回车效果；<hr/>是分割线。
5、列表：
（1）无序列表格式如下：
<ul> <li></li> </ul>
(2) 有序列表格式如下：
<ol> <li></li> </ol>
(3) 自定义列表格式如下：
<dl> <dt></dt> <dd></dd></dl>

3.<div>和<span>

1、<div>是块级元素，需要结合css来进行使用，文档布局就需要用到<div>将页面分成多个小块就可以用到他；
2、<span>是内联元素，本身没有特定的含义，可以作为文本的容器，也可以同css使用，可以单独设置一些文本的样式；
3、对这两个的标签使用时会对所在的区域进行命名，那就会用到id和class，id与class的区别就是id用于识别，class用于归类；

4.特殊符号

字符及描述	命名
（空格）	&nbsp；
'（撇号）	&apos；
&（表示and）	&amp；
<(小于号）	&lt；
>（大于号)	&gt；
©(版权）	&copy；
®(注册商标）	&reg；

5.图像和多媒体

1、图像标签<img src=" url " />,特别注意url是可以使用文件的绝对路径和相对路径，尽量是用相对路径；
2、还可以设置图片的宽高width和height；当鼠标放在图片上出现的文字信息可以用alt来标记；还可以给图片建加一个相框border表示为border：相框大小、相框的线条、相框的颜色，三个属性；对齐方式用align它的取值有：left、right、top、middle、bottom；
3、综合使用表示方法：
<img src=" url " width=" px" height=" px" align=“对齐方式” border=" " alt=“” />
A、多媒体标签<embed src=" url " />，同样url和上面一样的
B、属性：
（1）autostart：规定视频或者音频下载完了是否要自动播放，取值true播放，false不播放；
（2）loop：规定视频或者音频下载完了是否要循环播放，取值true循环播放，false不循环播放；
（3）width和height：同上；
（4）hidden：规定控制面版是否显示，默认是false，而true则是隐藏；
C、综合使用表示方法：
<embed src=" url " width=" px" height=" px" autostart=“true” loop=“true” />

6.超链接

1、语法：
<a href=“url” target=“-blank”>链接标题</a>
2、属性：
href定义链接标题所指向的url；
target用于打开链接目标窗口的方式-blank是在新的窗口进行打开；-self、-parent、-top表示是在原窗口打开。

7.表格

1、基本语法：
<table>
<tr>
<td></td>
</tr>
<table>
2、解释：table表格的标签必要；tr代表行；td代表列，这里表示一个表格是一行一列的。
3、表格属性：
（1）表格标签<table>的属性：
border：单位是像素，写法<table border=“2”>
width/height:同上；
bgcolor：设置表格的背景颜色，值可以是rgb、十六进制、英文颜色名称；
background：设置表格的背景图像；注意写法<table border=“2” style=“background:url()”>,url也是相对路径也可以是绝对路径；
cellspacing：可以设置表格中两个单元格之间的距离，即单元格间距；
cellpadding：可以设置单元格的内容到边框的距离，即单元格边距；
（2）行标签<tr>的属性：
align：设置行内容的水平对齐方式，可取值left、center、right；表示为居左、居中、居右；
valign：设置行内容的垂直对齐方式，可取值top、middle、bottom；表示为靠上、居中、靠下。
（3）单元格标签<td>的属性：
rowspan：对行进行合并，如rowspan=“2” 表示合并两行；
colspan：对行进列合并，如colspan=“2” 表示合并两列；这两个可以依次类推的。