前言

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” 表示合并两列；这两个可以依次类推的。

8.表单

1、表单定义标签用<form>
2、输入标签<input>：用于接收用户输入的信息。输入类型是由属性type定义的，语法<form><input name=“控件名称” type="控件类型“></form>
3、type属性取值及说明

取值	说明
text	文本框
password	密码框
file	文件域
checkbox	复选框
radio	单选按钮
button	标准按钮
submit	提交按钮
reset	重置按钮
image	图像域

总结

以上就是我所总结的web概念和HTML标签内容，这些只是学习web的一部分内容，在后续我也会做一下笔记，学习是需要不断积累和学习，web是一个动手能力较强的科目，需要不断的敲代码、不断记代码的格式以及写法。
（有写的不对的，希望各位能够提出，我会及时修改）

web前端学习总结（概念和HTML标签）相关推荐

web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
零基础web前端学习路线【全新web前端入门视频教程】
零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础前端学习路线分享给大家. 适合零基础学员 ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
零基础web前端学习路线
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取. 前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需 ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...
WEB前端学习路线2023完整版（附视频教程+学习资料）
下面小编为web前端学习爱好者汇总了一条完整的自学线路,适合初学者的WEB前端学习路线汇总! 需要更多教程,文末扫码即可别忘了扫码领资料哦[高清Java学习路线图] 和[全套学习视频及配套资料] 1 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
addeventlistener不支持ajax_好程序员web前端学习路线分享了解AJAX是什么
好程序员web前端学习路线分享了解AJAX是什么首先是服务器什么是服务器:咱们的页面来源于服务器:实例(在phpnwo上面存放一个页面), 咱们把页面放在互联网的服务器上,就有了自己的网站了. 1. ...

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

文章目录

前言