吉林省建设工程造价信息网站,哪里有免费的网站模板下载 迅雷下载软件,重庆seo推广,教育网站 网页赏析文章目录 一、简单解释 HTML二、认识 HTML 的结构三、了解HTML中的相关标签1.注释标签2.标题标签3.段落标签 p4. 换行标签 br5.格式化标签6.图片标签解释 src解释 alt解释其他有关 img 标签的属性 7.超链接标签 a8.表格标签9.列表标签10.input 标签11. select 下拉菜单以及 div… 文章目录 一、简单解释 HTML二、认识 HTML 的结构三、了解HTML中的相关标签1.注释标签2.标题标签3.段落标签 p4. 换行标签 br5.格式化标签6.图片标签解释 src解释 alt解释其他有关 img 标签的属性 7.超链接标签 a8.表格标签9.列表标签10.input 标签11. select 下拉菜单以及 divspan 一、简单解释 HTML
HTML 是程序员进行前端开发的一种语言工具相较于后端开发的语言这种语言相对比较简单。 而且对于前端代码我们的运行方式也是比较容易一般用户的电脑上都不会装 jvm 但是都会装浏览器。 浏览器就是我们前端的运行环境
二、认识 HTML 的结构
这里先简单罗列出一个 HTML 结构 解释 HTML 中的标签 HTML 代码是通过标签来组织的 如图中所示形如 html /html 使用尖括号组成的这个东西就是 “标签(tag)”也可以叫做 “元素(element)” 。 一个标签通常是成对出现的 html 开始标签 /html 结束标签 在上述两者之间就是标签的内容。 标签是可以嵌套的 一个标签的内容可以是其他一个或者多个标签。此时这些标签构成了一个**“树形结构”**。 标签可以赋予属性 可以在开始标签中给标签赋予属性(Attribute)。属性相当于键值对可以有一个或者多个。 快速生成代码框架 注本人在这里使用的是 VScode 编译器。 快速生成框架方法在 VScode 中首先创建 xxx.html 文件然后直接输入 !后按 tab 键。此时可以自动生成代码的主体框架。如图 了解如何运行已经编写的代码 对于 HTML 要运行编写好的相关代码在 VScode 中的步骤分为如下
右键单击要运行的 HTML 文件选择 (在文件资源管理器中显示)。 进入之后双击要运行的 HTML 文件如图 成功运行
三、了解HTML中的相关标签
1.注释标签
在 HTML 中的注释和其他语言的注释差别很大。 如图 注释显而易见是不会在页面中显示的但是如果打开开发者工具 (在网页页面按 F12)在网页中查看源代码还是可以看到的。如图
2.标题标签
标题标签在这里分为 6 种依次由大到小排列。从 h1——h6
代码如下 !--不同标题--h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6页面展示如下 注 需要注意的是在 html 代码中标签的是否换行和代码的编写方式无关。
3.段落标签 p
一个 p 段落标签囊括的内容可以让我们在网页中看到文字的分层也就是文章的段落形式。
代码如下
p这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. brbr hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?/p
p这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?/p
p这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?/p页面演示如下 如图所示被 p 标签囊括的元素在网页中的表现就是被段落的形式分割开来。
注 这里标签中的文段是使用随机的方式产生一段文本专门用来调试演示效果。 输入 (Lorem) 并按 Tab 键即可自动生成。
4. 换行标签 br
这个标签还是非常简单的这里罗列图示即可。
5.格式化标签
对于个格式化标签这里分为 4 类。 变粗倾斜删除线下划线。 下面进行简单的代码演示 !--格式化标签--strong变粗/strongb变粗/bbrem倾斜/emi倾斜/ibrdel删除线/dels删除线/sbrins下划线/insu下划线/ubr页面演示如下
6.图片标签
对于图片标签其代码的形式如下 img src alt观察这个形式其中含有两个元素 src 和 alt 。
解释 src
其中最核心的属性是 src (必填)。 这个 src 描述了该图片的路径。(路径在这里有三类1.本地的绝对路径。2.本地相对路径。3.还可以是网络路径)
绝对路径 所谓绝对路径就是指这个图片存储的位置从盘符开始描述直到对应的文件。 代码如下
img srcf:/picture/fengjing.jpg页面演示 如图所示 (由于地方有限这里就单纯演示图片部分区域)
相对路径 所谓相对路径就是需要当前所在的 html 文件夹内存在想要表示的图片。
代码如下
img src./fengjing.jpg页面演示 3.网络路径 所谓网络路径也就是在 src 后写入对应图片的网址即可。
代码如下
img srchttps://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rikC0D21hJDYvXoswriuhttp%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpgehknetN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3drislpidImgRawr0页面演示
解释 alt
这个 alt 属性的作用就是在图片出现问题时就会显示 alt 对应的文本。
代码如下 img src./fengjin.jpg alt这是一张风景图片这里故意将对应的地址敲错。 页面演示
解释其他有关 img 标签的属性 title 属性当鼠标选停在图片上时会出现一个提示。 代码如下
img title这是一张美丽的风景图 src./fengjing.jpg alt这是一张风景图注 这里无法通过截图来演示大家可以自行尝试。 width / height 描述图片的尺寸 代码如下
img width100px height100px src./fengjing.jpg alt这是一张风景图页面展示
7.超链接标签 a
对于超链接标签也就是说可以让页面中的文字上附有链接只需要在页面中单击就可以跳转到相应页面。
代码如下 a hrefhttps://www.baidu.com百度/aa hrefhttps://www.sogou.com搜狗/a页面展示 但是这里会有一个问题就是当我们点击这个链接时并不会弹出一个新的页面而是当前的页面会被覆盖。
这里有一个属性target添加这个属性后就可以打开一个新的标签页**(而不会替换原有的页面)**
代码如下
a hrefhttps://www.baidu.com target_blank百度/a
a hrefhttps://www.sogou.com target_blank搜狗/a8.表格标签
对于表格标签主要的关键字有下面几个。
table 表示整个表格。tr 表示一行。td 表示一个单元格。th 表示表头中的单元格border 设定边框的粗细
这里先简单演示一下基本操作。 代码如下 table width500px height200px border1pxtrth1/thth2/th/trtrtd3/tdtd4/td/tr/table页面展示 如图所示我们发现表格的边框并不是一个实线。要解决这个问题我们就要用到一个关键字 cellspacing。 只需要在 table 标签中将 cellspacing 设定为 0 就可以解决边框问题。
table width500px height200px border1px cellspacing0页面演示
9.列表标签
对于列表标签这里常用的关键字有下面三个
有序列表 ol无序列表 ul列表项 li
代码演示 h3我喜欢的虚拟舰船们/h3!--有序列表--olli喀琅施塔得/lili中途岛/lili斯大林格勒/lili塔什干/li/ol!--无序列表--ulli喀琅施塔得/lili中途岛/lili斯大林格勒/lili塔什干/li/ul页面展示
10.input 标签
对于 input 标签有很多形态可以表现成各种用户来输入的组件。
单行文本框
input typetext单行密码文本框
input typepassword单选框
input typeradio name sex 男
input typeradio name sex 女需要注意的是这里要实现单选情况需要添加一个 name 属性相同的 name 属性单选框之间的值是互斥的。 4. 多选框
大学生每日的活动
input typecheckbox 吃饭
input typecheckbox 睡觉
input typecheckbox 打豆豆按钮
input typebutton value 这是一个按钮对于按钮单击之后的反应需要 js 来配合实现。
11. select 下拉菜单以及 divspan
select 下拉菜单 selectoption北京/optionoption上海/optionoption深圳/optionoption广州/optionoption天津/option/selectdiv span
div 默认是独占一行块级元素。 span 默认不是独占一行行内元素。 divspan北京/spanspan北京/span/divdivspan天津/spanspan天津/span/divdivspan上海/spanspan上海/span/div
