个人网站数据库怎么做,东莞智通人才网官网登录,html网站开发基础,怎么建设手机网站作为一名全栈工程师#xff0c;在日常的工作中#xff0c;可能更侧重于后端开发#xff0c;如#xff1a;C##xff0c;Java#xff0c;SQL #xff0c;Python等#xff0c;对前端的知识则不太精通。在一些比较完善的公司或者项目中#xff0c;一般会搭配前端工程师在日常的工作中可能更侧重于后端开发如C#JavaSQL Python等对前端的知识则不太精通。在一些比较完善的公司或者项目中一般会搭配前端工程师UI工程师等来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师在一些小型项目或者初创公司中职能划分并不明确往往要一个人前后端全都会做 所以作为一名全栈工程师或者后端工程师掌握必备的前端知识也是必不可少的一项技能。今天就着重讲解一下作为一名全栈工程师前端Html方面的必须要掌握的相关知识。 HTML介绍 Html是用来描述网页的一种语言被称之为超文本标记语言。用HTML编写的文件后缀以.html结尾。HTML是一种标记语言一套标记标签。 标签是由尖括号包围的关键字。如html 标签有两种表现形式 双标签 如html /html 单标签如img / HTML5的DOCTYPE声明 HTML5是HTML的最新修订版本2014年10月由万维网联盟(W3C)完成标准制定。DOCTYPE是doucment type的缩写!DOCTYPE html 是H5的声明位于文档的最前面处于标签之前它是网页的必备组成部分可以避免浏览的怪异模式。 HTML5基本骨架 通过Visual Studio Code创建的Html默认骨架如下所示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html 对于HTML5基本骨架中的标签说明如下所示 1. html标签 定义Html文档浏览器看到后就明白这是HTML文档所以其他的元素要包裹在它的里面标签限定了文档的开始和结束位置。 2. head标签 head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息包括文档的标题在web中的位置以及和其他文档的关系等。绝大多数的文档头部信息包含的数据都不会真正作为内容显示给读者。 3. body标签 body标签定义文档的主体。body元素包含文档的所有内容比如文本超链接图形表格列表等等它会直接的在页面中显示出来也就是用户可以直观的看到的内容。 4. title标签 title标签可以定义文档的标题。它显示在浏览器窗口的标题栏或状态栏上。title标签是head标签中唯一必须要求包含的信息写head 一定要写title。title增加有利于SEO优化即通过对网站的内容调整满足搜索引擎的排名需求。 5. meta标签 meta标签用来描述一个html网页文档的属性关键词等如 charset”utf-8”是说明当前使用的是utf-8编码格式在开发中我们经常看到utf-8或者是gbk 这些都是编码格式通常使用utf-8。 标题标签 1. 标题介绍与应用 标题是通过h1到h6标签进行定义的。h1定义最大的标题h6定义最小的标题。如下所示
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6 在Visual Studio Code中生成h1到h6的快捷键为h$*6 2. 正确使用标题 请确保将Html标题标签只用于标题不要仅仅是为了生成粗体或大号的文本而使用标题。 正确使用标题有益于SEO 应该将h1用作主标题最重要的其次 是h2次要的再其次是h3依次类推。 3. 标题标签的位置摆放 在标签中添加属性 align”left|center|right”可以设置位置默认居左。 段落标签 段落是通过P标签来定义的如
p这是一个段落/p
p这是另外一个段落/p 换行标签 如果您希望在不产生一个新段落的情况下进行换行请使用br
br标签是一个空的HTML元素。如下所示
p同一个段落内br /有换行,也可以br /再换一行/p 水平线 hr标签在html页面中创建水平线如下所示
hr width200 colorred alignleft size4 hr所拥有的属性如下所示 color:设置水平线的颜色 width:设置水平线的长度 size: 设置水平线的高度 align: 设置水平线的对齐方式默认居中可取值left|right
注意换行标签br,水平线标签hr 都是单标签 图片标签 网站中最多的元素img标签定义html页面中的图像。如下所示
img src1.jpg alt这是一张照片 width300 height300 title这是图片的标题 img标签是单标签不需要闭合。主要属性如下所示 src:图片路径与名字可以是相对路径绝对路径网络路径 alt:规定图像的替代文本即图像不显示时显示的内容 widht:设置图像的宽度 height:设置图像的高度 title:鼠标悬停在图片上显示的提示信息
img标签的路径如下所示
绝对路径电脑的盘符存储与访问的具体地址网络路径表示网络上的一张图片所对应的路径相对路径两者相对关系同一路径下可直接访问。相对路径之间的关系主要有以下几种 同级关系./父级关系../子级关系/
图片示例如下所示
!--绝对路径,不建议使用--
img srcD:\test\1.png alt这是一张绝对路径的图片
!--相对路径--
img src1.jpg alt这是一张相对路径照片 width300 height200 title这是图片的标题
!--网络路径--
img srchttps://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png alt这是一张网络图片 超链接标签 1. 超链接描述 html使用标签a 来设置超文本链接 2. 超链接属性 在a标签中使用href属性来描述链接的跳转地址。默认情况下链接将以如下形式出现在浏览器中 一个未访问过的链接显示为蓝色字体并带有下划线。 访问过的链接显示为紫色并带有下划线。 点击链接时链接显示为红色并带有下划线。
后期可通过CSS样式修改掉这些效果。
超链接可以是一个字一个词或者一组词也可以是一副图像您可以点击这些内容来跳转到新的页面。如下所示
a hrefhttps:www.baidu.com百度一下你就知道/a
a hrefhttps:www.baidu.com img srchttps://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png alt这是一张网络图片
/a 当您把鼠标指针移动到网页中的某个超链接上时箭头会变为一只小手形状。可以用来区分超链接和非超链接。 文本标签 常用的文本标签有以下几种 em标签定义着重文字 b标签定义粗体文字 i标签定义斜体文字 strong标签定义加重语气 del标签定义删除字 span标签元素没有特定的含义
注意常用文本标签和段落p是不同的段落代表一段文本而文本标签一般表示文本词汇。
文本标签示例如下所示
em着重文字标签em/em
b粗体文字标签b/b
i斜体标签i/i
strong加重语气标签strong/strong
del定义删除文本del/del
span无特殊含义标签span为以后css做准备/span 有序列表标签 有序列表是一列项目列表项目使用数字进行标记。有序列表始于ol,每个列表项始于li标记。
olli第一项/li li第二项/li li第三项/li
/ol 1. 有序列表的type属性 ol标签的type属性拥有的选项如下所示 1 表示列表项目用数字标号1,2,3... a 表示列表项目用小写字母标号a,b,c,... A 表示列表项目用大写字母标号A,B,C... i 表示列表项目用小写罗马字符标号i,ii,iii... I表示列表项目用大写罗马字符标号I,II,III... 2. 有序列表嵌套 列表是可以嵌套的。
ol li第一项/li li ol li第1.1项内容/li li第1.2项内容/li li第1.3项内容/li /ol /li li第二项/li li第三项/li
/ol 无序列表标签 无序列表是一个项目的列表此项目列表使用粗体圆点进行标记。无序列表始于ul标签没有列表项始于li标签
ul li苹果/li li橘子/li li梨/li
/ul 1. 无序列表的type属性 ul的type属性拥有的选项如下所示 disc,默认实心圈 circle空心圆 square 默认小方块 none 不显示 2. 无序列表嵌套 列表是可以嵌套的
ul li蔬菜/li li水果 ul li苹果/li li橘子/li li梨/li /ul /li li树木/li
/ul 3. 常见应用场景 无序的列表效果如新闻列表等 导航效果绝大多数的导航都是基于无序列表实现的。 表格标签 表格在数据展示方面非常简单并且表现优秀。 1. 表格组成与特点 表格右行列单元格组成 单元格特点同行等高同列等宽。
表格在html中通过以下标签表示 表格标签table 行tr 单元格td
表格示例
table tr td/td td/td td/td td/td /tr tr td/td td/td td/td td/td /tr
/table 在vistual studio code中快速生成表格的快捷键为tabletr*2td*3{单元格内容}。 2. 表格属性 表格具有如下属性 border 设置表格的边框 width 表格的宽度 height 表格的高度 3. 单元格合并 单元格合并分为以下两种 水平合并colspan”合并的列数” 垂直合并rowspan”合并的行数” 表单标签 表单让网页具备交互功能。
表单在web网页中用来给用户填写信息从而能采集用户信息使得网页具有交互的功能。所有的用户输入内容的地方都用表单来写如登录注册搜索框等。
表单的由容器和控件组成的一个表单一般应该包含用户填写信息的输入框提交按钮等。这些输入框按钮叫做控件。表单就是容器它能容纳各种各样的控件。
form action methodpost input typetext name id input typebutton value
/form 表单具有如下属性 action 服务请求的地址 name 表单的名称 method 提交数据的方式主要有get和post两种主要区别如下 数据提交方式get提交的数据url可以看到post看不到 get一般用于提交少量的数据post用来提交大量的数据。 表单元素 一个完整的表单包含三个基本组成部分表单标签表单域表单按钮。 1. 文本框 文本框通过input type”text”标签来设定当用户要在表单中输入字母数字等内容时就会用到文本框。 2. 密码框 密码框字段通过标签 input type”password” 来定义。密码框中的内容不会以明文显示默认密码显示为实心圆点 3. 提交按钮 提交按钮通过标签input type”submit”来定义。当用点击提交按钮时表单内容会被传送到另一个文件进行处理。由form表单的action属性进行定义。 块元素和行内元素内联元素 HTML5出现之前经常把元素按照块级元素和内联元素来区分在HTML5中元素不再按照这种方式来区分而是按照内容模型来区分。主要分为 元数据类型metadata content 区块型sectioning content 标题型heading content 文档流型flow content 语句型phrasing content 内嵌型embedded content 交互型interactive content
元素不属于任何一个类别的被称为穿透的元素可能数据不止一个类型称之为混合型。 虽然HTML5版本对元素分类更细致了但是对于初学者并太好理解所以我们仍然按照块级元素和内联元素进行区分这对我们的布局起到了至关重要的作用。 1. 内联元素和块级元素的区别 块元素 块元素会在页面中单独占一行多个块级元素自上而下排列 可以设置widthheight属性 一般块级元素可以包含行内元素和其他块级元素。 内联元素 行内元素不会在页面中单独占据一行只占自身的大小。 行内元素设置width,height无效 一般内联元素不包含块级元素。 2. 常见示例 常见块级元素
div form h1~h6 hr p table ul ol 等
常见内联元素
a b em i span strong 等
行内块级元素特点不换行能够识别宽度高度
button img input HTML5新增标签 在HTML5出现之前一般采用DIVCSS布局页面但是这样的布局方式不仅使文档结构不够清晰而且不利于搜索引擎爬虫对页面的爬取。
为了解决上述缺点HTML5新增很多新的语义化标签。
div是容器元素是页面中见到的最多的元素。
用divcss实现页面布局一般如下所示 H5新标签实现 关于H5中新增的标签常见如下所示 header标签头部 nav标签导航 section 定义文档中的章节页眉页脚 aside 侧边栏 footer 页面底部 article 代表一个独立的完整的相关内容块例如一篇完整的论坛帖子一篇博客文章一个评论等。
以上就是全栈工程师必须要掌握的前端Html技能全部内容。关于同系列文章链接如下
全栈工程师必须要掌握的前端JavaScript技能
全栈工程师必须要掌握的前端CSS技能
希望可以抛砖引玉一起学习共同进步。学习编程从关注【老码识途】开始为大家分享更多文章
