Web前端小白必看【网页开发工具/HTML常用标签】
网页开发工具和HTML常用标签
- 一、网页开发工具vscode的使用
- 1.1常见的网页开发工具:
- 1.2vscode为例创建网页文件。
- 1.3vscode网页制作相关插件安装
- 1.4vscode出现的网页骨架标签
- 二、路径的理解和认识:
- 两种路径:相对路径和绝对路径
- 相对路径:
- 绝对路径:
- 二.HTML常用标签
- 1.标题标签:h(n)
- 2.段落标签:p
- 3. 换行标签:br
- 4.四个文本格式化标签:加粗,斜体,删除线,下划线
- 5.盒子标签:div和span
- 6.图像标签:img
- 7.超链接标签(重点):a
- 链接的分类:外部,内部,空,下载,网页元素,锚点
- 8 .注释标签:《!-- 注释--》
- 特殊字符的表示:
- 9. 表格标签:table,tr,td,th,thead,tbody,
- 10.列表标签:ul,ol,li,dl,dd,dt
- 11.表单标签:input,label,select,textarea
一、网页开发工具vscode的使用
1.1常见的网页开发工具:
VScode,DW,等
1.2vscode为例创建网页文件。
步骤:
1 创建文件(ctrl + n)
2 创建后先保存一下(ctrl +s),文件后缀设为html
3 输入一个!,选择第一个(或者TAB键)就会出现制作网页的骨架标签
4 利用插件(open in brower)在浏览器中预览预览网页(open in defaultborows):快捷键 alt加b
1.3vscode网页制作相关插件安装
- auto rename tag插件,一对标签前后如果需要更改会同时更改(配对更改)。
- 如何删除插件:找到对应插件卸载就行。
1.4vscode出现的网页骨架标签
- :文档类型声明标签
作用是告诉浏览器使用的html的版本,不是html标签
- :指出当前网页显示的语言(lang是language的缩写)
注意:对于文档的显示,定义成英文(en)时也可以显示中文,定义成中文时也可以显示英文。
中国人,用zh-Cn更好
3.meta charset =“utf - 8”
注意:这三种标签一定要写,否则可能会出现乱码的情况。一般情况下,统一使用万国码 “UTF-8".
4.中间的几行标签:
这两行用于移动端开发,暂时不用管。
二、路径的理解和认识:
(1)目录文件夹:
实际工作中,文件不能随便乱放,需要一个总的文件夹去管理,这个文件夹称为目录文件夹。
目录文件夹就是普通文件夹,里面存放相关素材(文件,图片。。。)
(2)根目录:
打开进入目录文件夹的第一层就称为根目录
C:\Users\86137\Desktop\Web文件(目录文件)
通过学习了目录文件夹喝根目录这两个概念,就可以不再像之前那样每次新建一个html文件了
我们可以选择一个文件(我就以D盘中的网页设计为文件夹)作为目录文件夹,里面的文件包括图片和html文件的位置称为根目录。
此后,要在目录文件夹里面创建一个htm文件就变得简单(只需要在左侧点击命名就自动保存到目录文件夹当中去了),而图片是在目录文件内部的,可以随时调用
这样做的好处:后期方便管理文件
打开目录文件夹的两种方式:
1 左侧文件处点击
2 直接拖动到VScode上
两种路径:相对路径和绝对路径
相对路径:
以引用的hyml文件所在的位置作为参考基准,建立出图片的目录路径。**
同一级相对路径:只需要将图像的名字直接搞到src属性中
下一级路径的使用:使用符号” / “
上一级路径的使用:使用符号” …/ “
总结:都是图片相对于html网页文件的路径
绝对路径:
(1)本地的图片:绝对路径从盘符开始,一下到底的图片的位置,是找的图片在该电脑中具体的位置
(2)还有另一种绝对路径,是从网络中找的图片(非本地的图片)
注意:绝对路径斜杠向右,相对路径斜杠向左
不管是相对路径还是绝对路径,都是为了找到照片的位置
二.HTML常用标签
引入:首先,html的标签有很多,要想更好的记住相应标签的作用,最好的方法时理解标签的含义。
1.标题标签:h(n)
有h1-h6共六级标题,h是head的缩写。
- h1 双标签为 一级标题
标签语义:作为标题使用,按照重要性递减
注意点:每个标题占一行,字号逐渐递减,重要性逐渐递减(一级标题最为重要)
2.段落标签:p
使用: p双标签,双标签之间为段落的内容
特点:
(1)文本会根据浏览器窗口自动换行
(2)段落与段落之间有空间分割,且相较于换行标签比较大
3. 换行标签:br
- 作用:进行强制换行,break row的缩写,是单标签
特点:(1)单标签 (2)与段落之间的距离大小不同,相较于段落执教的空间更小
4.四个文本格式化标签:加粗,斜体,删除线,下划线
- (1)文字加粗标签:
<b或者<strong双标签
最好使用<strong因为这样的标签更有意义
- (2)文章斜体标签:
<em双标签或者
<i双标签
推荐使用em标签
- (3)删除线标签:
<del双标签
或者
<s双标签
推荐使用del
- (4)下划线标签:
ins双标签
或者
u双标签
推荐使用ins标签
标签语义:突出文字的重要性,比普通文字更重要
5.盒子标签:div和span
相同点:两者都没有语义,都是是一个盒子,用来装内容(用于布局)
div是division的缩写,表示分割
span表示跨度,跨距
注意:
一行只能放置一个div标签,可以理解为超大盒子
一行可以显示多个span标签,小盒子
6.图像标签:img
(1)如何在网页中插入图像:img单标签:image的缩写
语法:<img= src=“图像的url”>
src是img标签的必须属性**(必须要有),指定文件的路径及文件名**
属性:顾名思义,属于图像的特性
想要让一个图片放到某个网页,则最好是将该网页文件和图片放到同一路径下
(2) 图像标签的属性:
alt属性:替换文本(图像无法显示时候会显示替换文本)
title属性:提示文本,鼠标放到图像上时会出现的提示文字
width属性:给图像设定宽度
highth属性:给图像设定高度
注意:width属性和highth属性一般这两个只修改一个,另一个会自动等比例缩放,单位是像素
border属性:设定黑色的边框
(3)图像标签的注意点:
1 所有属性都必须写到标签名img的后面
2 属性不分先后顺序 ,属性之间空格分隔
3 采用键值对的格式(属性=“属性值”)
7.超链接标签(重点):a
双标签a 定义超链接标签,作用是跳转另一页面,a是anchor的缩写,意为锚
1 超链接语法格式:
《 a href=“目标链接的url” target=“目标窗口的弹出方式” 》文本或者是图片《/a》
这个地方用书名号代替尖括号
属性1(必须属性):href属性,用于指定目标链接的url(网址),只有有了herf属性文字或者图片才具有超链接的功能
属性2:target属性 ,用于指定窗口的打开方式,_self为默认值(在当前窗口打开,当前的窗口被覆盖),_blank为在新窗口(空白的)中打开(原来的不会被覆盖)页面
链接的分类:外部,内部,空,下载,网页元素,锚点
(1) 外部链接:
在href属性中必须使用http:// + 外部网址
( 2) 内部链接:页面之间的相互链接
使用方法:直接在href属性中输入同一目录文件夹下的另一.html网页文件
( 3) 空链接:
暂时没有确定链接目标,可以先使用#来代替
(4) 下载链接:
如果href中的url是一个可执行文件或者压缩包,会下载/压缩这个文件
( 5) 网页元素链接:
网页中的各种网页元素如文字,图像,表格,音频(录音),视频,都可以添加超链接(把各种网页元素都可以当作是文字)
(6) 锚点链接:
作用:点击链接时候可以快速跳到到该页面的某个位置
设置步骤:
1 在链接文本的href属性中,设置属性值(value)设置为为**#名字**,
2 然后找到目标位置,对应标签里面添加一个id属性=“刚才设置的名字”
8 .注释标签:《!-- 注释–》
注释:便于阅读和理解代码的作用,给程序员看的,不会执行。
html中的注释以结束
快捷键:ctrl加/
特殊字符的表示:
一些特殊符号无法直接使用,可以使用下面的字符代替
重点记住的空格,大于,小于
http://是超文本传输协议,规定了浏览器和浏览器服务之间通信的规则,能后准确的保证用户请求到达客户端。
9. 表格标签:table,tr,td,th,thead,tbody,
表格的作用:展示数据,使数据可读性更强
各种表格标签:
table双标签用于定义表格
tr双标签定义表格中的行(放到table标签中)
td双标签定义表格中的单元格
teble data指的单元格中的数据
三者为嵌套的父子关系
1 表头单元格标签:th
表头单元格也是单元格,一般位于表格中第一行或者第一列,相较于td标签的特点是文本加粗:th标签(table head的缩写)
表示html表格的表头部分:居中,加粗
2 表格属性:要写到table标签中
表格标签属性实际开发不常用,通过CSS设置
学习表格属性的目的:记住这些单词,后边CSS会使用 并且直观感受
align属性:对齐方式
width/highth属性:设置表格的宽或高
border属性:设置边框(文字外),0表示不设边框,1表示设边框
cellpadding属性:设置单元格的边和内容之间的距离,默认1pixel
cellspacing属性:设置单元格之间的距离,默认2pixel
使用时一般都将他们设置为0
3. 表格结构标签:thead
thead标签表示表格的头部区域(表头区域,范围相对于th更广),其内部必须有tr行标签
作用:使结构更清晰
tbody为表格的主体部分,用于存放数据
注意:两者都是放在table标签之中
4 合并单元格:把多个单元格合并为一个
(1)合并单元格的方式:
跨行合并:上下合并,涉及两行;rowspan
跨列合并:左右合并,涉及两列;colspan
(2)目标单元格:
跨行合并:最上侧为目标单元格
跨列:最左侧的单元格为目标单元格
合并单元格的三步:
1 确定是跨行还是跨列2 找到目标单元格,写出代码 合并方式=合并的单元个数量
3 删除多余的单元格
4 表格总结:三部分
表格相关标签:table,tr,td,th,thead,tbody,
表格相关属性:align,border,cellpadding,cellspacing,width
合并单元格
10.列表标签:ul,ol,li,dl,dd,dt
表格用来展示数据,列表用来布局,特点是整齐,有序。
三类:无序列表,有序列表,自定义列表
1 无序列表:ul,li,
ul标签表示无序列表,一般以项目符号呈现列表项,列表项使用li标签定义(ul标签里包含若干li)
(1) 若干个列表项没有顺序之分,是并列的
(2 )ul标签中只能放li(规定)
(3) li相当于一个容器,啥都能放
(4 ) 无序列表带有自己的样式(每个列表项前面会有个小黑点),实际使用过程中,会使用CSS来设置。
2 有序列表:ol,li
各个列表项需要按照一定的顺序排列定义
ol标签来定义有序列表,li标签来定义列表项
注意:
1 ol标签中只能放li标签
2 li之间啥都能放
3 有序列表也带有自己的样式属性,实际使用过程之中会使用CSS来对其设置。
3 自定义列表:dl,dd,dt
由三组标签组成
常用于对属于名词进行解释描述,定义列表的列表项前没有任何项目符号
dl标签用于自定义列表,作用是给出一个大的空间
dt标签和若干dd标签
dt标签给出一个名词,多个dd标签对dt标签中的名词进行解释
(1) dl里面只能包含dt和dd
(2) dt和dd个数没有限制,通常一个dt对应多个dd
(3) dt和dd是并列关系
列表标签的总结:
无序列表:ul标签,里面只能放li
有序列表:ol标签,里面只能放li(了解)
自定义列表:dl标签,里面只能放dt和dd
目标:
什么时候使用无序,什么时候用有序列表
无序列表和自定义列表的代码怎么写
列表布局在学完CSS后整
11.表单标签:input,label,select,textarea
什么是表单?比如这个世纪佳缘网的用于统计用户信息的东西,这就叫表单。
虽然但是,谈恋爱还是需要考虑清楚的。
为什么需要表单?
为了收集用户信息
表单的组成:
(1)表单域(表单的范围)
(2)表单元素
(3)提示信息
表单域:包含表单元素的一个区域,作用是收集用户信息并传递给服务器
form标签定义表单域
form标签常用属性:(了解)
action:指定接收数据处理数据的服务器
method:设置提交表单数据的方式
name:指定表单域的名字
表单元素:
表单元素就是允许用户在表单中输入/选择的内容元素。
一 input输入表单元素标签:
input是单标签。必须包含一个属性type,属性值可以是多种形式
type属性值:不同的type值会显示不同的表单形态
submit属性:将表单域中所有的值发送给服务器
reset属性:重置(初始化)表单域中的元素
button属性:非提交数据的按钮,执行某项活动(一般与JS搭配使用)
file属性:用于上传文件
- input表单元素除了type属性,还有的属性:
name属性:定义input元素的名称,用来区别不同的表单元素,值是自定义的
value:定义表单中元素的值:打开网页默认显示文字,显示主要针对后端人员使用
checked:规定网页首次打开时为选中状态选中,值与属性名相同
maxlength:规定输入字段中字符最大长度
注意:
1 name和value是每个表单元素都有的属性值,主要为后端使用
2 name是表单元素的名字,注意单选框和复选框(多选框)要有相同的name值。
3 checked属性针对单选框和复选框,作用是打开某一网页默认选择某个表单元素。
4 maxlength限制输入最多字符数,不常用
二: label标签:标注标签
和input标签搭配使用,为input捆绑表单元素,增加用户体验
核心:label标签属性for的值和input表单元素中的id属性值相同
三 .select下拉表单元素标签:
select:页面中有多个选择,节约页面空间,使用select标签元素定义下拉列表
语法:
至少包括一对选项,option中定义selected,可以设置默认选项(类似出checked属性)
四. 文本域标签:textarea
使用场景:适用于多行输入文本,内容量较大。
语法:
注:
提前写好的文本域内容会在网页中显示
通过文本域标签可以实现多行文本输入
Web前端小白必看【网页开发工具/HTML常用标签】相关推荐
- HTML的怎么使用,开发工具以及常用标签。
HTML的怎么使用,开发工具以及常用标签. 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该文字标题即可 CSDN主页:CSDN主页-冰山一树Sankey 博客园主页:博客园主页-冰 ...
- Web前端新手必看的7种技术,从菜鸟到高级开发的蜕变!
随着互联网发展,Web前端开发逐渐走红.由于大学没有开设前端课程,知识体系不够规范完整,每个人对它的认识也各不相同,加之互联网技术更新迭代迅速今天给你解读一下,学习Web前端的基本需要掌握的知识. 具 ...
- 软件推荐:Web前端初学者会用到开发工具(附官网下载地址)
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址,下 ...
- web网页开发工具,HTML标签之表单标签
canvas元素用于在网页上绘制图形. 什么是canvas? HTML5元素用于图形的绘制,通过脚本(通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形. 你可以通过多种 ...
- 【Web前端初学笔记】②HTML基本结构标签,VSCode工具创建页面,网页开发工具
文章目录 一.HTML基本结构标签 二.VSCode工具创建页面 三.网页开发工具 1. 基本骨架 2. 文档类型声明标签 3. lang语言种类 4. 字符集 `Character set` 一.H ...
- 小白必看、手把手教你利用爬虫爬网页
接下来从网络爬虫的概念.用处与价值和结构等三个方面,让大家对网络爬虫有一个基本的了解. 网络爬虫及其应用 随着网络的迅速发展,万维网成为大量信息的载体,如何有效地提取并利用这些信息成为一个巨大的挑战, ...
- 开发直播源码需要了解哪些原理?小白必看内容
在直播源码开发的过程中会涉及到很多技术细节和原理,只有对这些技术细节和原理有了了解,才能实现更高效率的开发.接下来我们就一起来看一下开发直播源码需要了解哪些原理吧. [一个完整直播源码架构] [一个完 ...
- 网页开发工具有哪些?——开发者必备的15个Web开发工具
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Web前端小白入门指迷
大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
最新文章
- 最强观战指南 | Python分析热门夺冠球队(附源代码)
- pythonidle新建文件_(一)Python入门:04IDLE开发环境的使用-建立Python源文件
- ehcache memcache redis 三大缓存
- ocx控件 postmessage消息会消失_实战经验:如何检测CMFCTabCtrl控件标签页切换事件...
- PyQt5案例汇总(完整版)
- java oss如何下载文件_Java OSS批量下载并压缩为ZIP代码实例
- Centos 7 更改系统语言为中文
- 使用axis2 services.xml 发布web service
- android super参数,Android Superuser 提权漏洞分析
- 当你发现自己U盘里文件夹有了“.exe”后缀该怎么办
- c语言的异步回调函数,C语言函数的回调函数
- 华佳慧科技:OSN500设备的RPLCUR性能事件
- matlab ga 函数的最好适应度是什么
- PhotoShop等比缩放图片
- oppo怎么修改dns服务器地址,OPPO R7/R7 Plus修改DNS图文教程
- 知名互联网公司架构图
- matlab设计一个AM调幅广播传输系统,基于Simulink的调幅广播系统的仿真与分析
- wifi无线网卡(zd1211b芯片)移植到mini2440全过程(一)
- 知乎用户群分析--又双叒叕一只爬虫爬了知乎20万用户
- 关于把war包放在Tomcat的webapps目录下 启动服务 前端访问报404