开发工程师必备————【Day17】前端HTML基础知识点
今日内容简介
- 前端简介
- HTTP超文本传输协议
- HTML简介
- head内常见标签
- body内常见标签
前端简介
1.前端与后端
（1） 前端
与用户直接打交道的操作界面都可以称之为是前端
（2）后端(幕后工作者)
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
3.前端核心基础
- HTML——网页的骨架
全称超文本标记语言，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。- CSS——网页的样式
全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。- JS——网页的动态
全称是JaveScript，JavaScript是一门脚本语言。- 三者之间的区别：
HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。
超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障碍沟通交流 有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式
HTTP超文本传输协议
1.四大特性
（1）基于请求响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
（2）基于TCP/IP之上作用于应用层的协议
应用层协议:HTTP HTTPS FTP …
（3）无状态
服务端不保存客户端状态
（4）无/短连接
不保持客户端与服务端之间的链接导通
2.数据格式
（1）请求数据格式
- 请求首行(请求方式:有很多种 协议名称及版本)
- 请求头(一大堆K:V键值对)
- 换行
- 请求体(携带一些敏感的数据 不是所有的请求都有请求体)
（2）响应数据格式
- 响应首行(响应状态码)
- 响应头(一大堆K:V键值对)
- 换行
- 响应体(一般情况下就是浏览器要展示给用户看的数据)
3.响应状态码
（1）利用数字来表示一些复杂的情况说明(类似于暗号)
1XX:服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2XX:200 OK服务端给出了相应响应
3XX:重定向
4XX:403请求不符合条件 404请求资源不存在
5XX:服务端内部错误
（2）我们在公司中还会自己定义更多的状态码
一般情况下从10000开始
HTML简介
超文本标记语言
是所有浏览器展示的页面必备的!!!
浏览器展示的界面我们也称之为HTML页面,存储HTML语言的文件后缀一般是.html。
HTML没有任何的逻辑，所见即所得；
HTML代码是不讲究缩进的。
1.HTML注释语法
(1) < !-- 单行注释-->(2) < !-- 多行注释 -->
2.HTML文件结构
<html> 所有的代码都必须写在html标签内部<head></head> head内的数据一般都不是给用户看的<body></body> body内的数据就是浏览器展示给用户看的 </html>
3.HTML标签的分类
（1）单标签(自闭和标签)与双标签单标签： <img/>双标签： <a></a>（2）块儿级标签与行内标签
块儿级标签：h1~h6 p hr br 一个标签独占一行行内标签：u i s b 内部文本多大自身就占多大
head内常见标签
标签 意义 < title> < /title> 定义网页标题 < style>< /style> 定义内部样式表 < script>< /script> 定义JS代码或引入外部JS文件 < link/> 引入外部样式表文件或网站图标 < meta/> 定义网页原信息
- title标签
控制标签页小标题- style标签
内部支持编写CSS- link标签
引入外部CSS文件- script标签
内部支持编写JS代码 还可以通过src属性引入外部JS文件<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Hello HTML</title><style>body{color: rebeccapurple;}</style><link rel="stylesheet" href="mycss.css"> <!-- <script>--> <!-- confirm('你今天好帅~')--> <!-- </script>--><script src="myjs.js"></script> </head> <body> 哈喽大家好~ </body> </html>
- meta标签
通过内部属性的不同可以有很多功能：
（1）< meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
（2）< meta>标签位于文档的头部，不包含任何内容。
（3）< meta>提供的信息是用户不可见的。<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"> <meta name="description" content="填写一些网页的简介">
在head中设置网页标题和字符集编码<head><title>这里是标题</title><meta charset="utf-8"/></head>
body内基本标签
- HTML标题
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级。< hx>标题文本< /hx> (x为1-6)
- HTML 段落标签
如果想在网页上显示文章，这时就需要< p>标签了，把文章的段落放到< p>标签中。<p>段落 </p> <p>标签的默认样式，段前段后都会有空白。
- HTML 水平分割线
< hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
- HTML 换行标签
如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：<p>This is< br/>a para< br/>graph with line breaks</p>
- HTML 水平线
< hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
- HTML 下滑线
<u>下划线</u>-->
- HTML斜体
<i>斜体</i>-->
- HTML删除线
<s>删除线</s>-->
- HTML加粗
<b>加粗</b>-->
- HTML < span>标签
< span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。
body内基本符号与布局标签
1.body内基本符号
内容 对应代码 空格 & nbsp; > & gt; < & lt; & & amp; ¥ & yen; 版权 & copy; 注册 & reg;
2.body内布局标签
（1）块儿级标签——div
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
（2） 行内标签——span
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
（3）两者特点与区别：
- 块儿级标签是可以通过CSS调整为不独占一行
- 标签之间很多时候可以嵌套（块儿级可以嵌套任何类型的标签；行内标签只能嵌套行内标签）
- p标签虽然是块儿级标签 但是不能块儿级标签（p标签不能包含块级标签，p标签也不能包含p标签。）
body内常见标签
1.a标签
链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。<a href="http://www.oldboyedu.com" target="_blank" >点我</a>（1）href 可以填写网址 点击自动跳转
href还可以填写其他标签的id值 实现锚点功能使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>绝对URL - 指向另一个站点（比如 href="http://www.jd.com） 相对URL - 指当前站点中确切的路径（href="index.htm"） 锚URL - 指向页面中的锚（href="#top"）（2）target 可以控制是否新建页面跳转
_self表示在当前标签页中打开目标网页 _blank表示在新标签页中打开目标网页
2.img标签
图片标签
（1）src 填写图片地址(网络地址 本地地址)
（2）title 鼠标悬浮在图片上就会有提示信息
（3）alt 图片加载失败提示的信息
（4）height 调整图片的高度
width 调整图片的宽度
上述两个（height与width）调整一个另外一个等比例缩放<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)>
标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签：
（1）id属性(一对一管理)
类似于身份证号 在同一个html页面上 id值不能重复
（2）class属性(批量管理)
类似于分组 多个标签可以拥有相同的class值
列表标签
1.无序列表
<ul><li>python</li><li>golang</li><li>linux</li></ul>（1）页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
（2）type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表
（1）如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用< ol>标签来制作有序列表来展示。<ol type="I" start="10"><li>第一项</li><li>第二项</li><li>第三项</li> </ol>（2）type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3.标题列表
<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd></dl>
表格标签
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tr、th、td
1、< table>…< /table>：整个表格以< table>标记开始、< /table>标记结束。2、< tr>…< /tr>：表格的一行，所以有几对tr 表格就有几行。
3、< td>…< /td>：表格的一个单元格，一行中包含几对< td>…< /td>，说明一行中就有几列。
4、< th>…< /th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
表格标题
< caption> 指定表格标题，它显示在表格上方。
语法展示：<table><thead><tr><th>序号</th><th>用户名</th><th>密码</th></tr></thead><tbody><tr><td>1</td><td>jason</td><td>123</td></tr></tbody> </table>
表单标签
1.表单属性
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器获取命令： <form action="" method=""></form>
2.action属性—— 用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
< input> 元素会根据不同的 type 属性，变化为多种形态。
type属性值 表现形式 对应代码 text 单行输入文本 <input type=text" /> password 密码输入框 < input type=“password” /> date 日期输入框 < input type=“date” /> checkbox 复选框 < input type=“checkbox” checked=“checked” /> radio 单选框 < input type=“radio” /> submit 提交按钮 < input type=“submit” value=“提交” /> reset 重置按钮 < input type=“reset” value=“重置” /> button 普通按钮 < input type=“button” value=“普通按钮” /> hidden 隐藏输入框 < input type=“hidden” /> file 文本选择框 < input type=“file” /> 属性说明：
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
type=“button”, “reset”, "submit"时，为按钮上显示的文本年内容
type=“text”,“password”,"hidden"时，为输入框的初始值
type=“checkbox”, “radio”, “file”，为输入相关联的值- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
3.method属性——用于控制请求的方式(get\post)
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
3.代码说明
<form action="" method="post"><p>username:<input type="text"></p><p>password:<input type="password"></p><p>birthday:<input type="date"></p><p>email:<input type="email"></p><p>gender:<input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">其他</p><p>hobby:<input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">双色球</p><p>file:<input type="file"></p><p>files:<input type="file" multiple></p><p>province:<select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">深圳</option></select></p><p>GF:<select name="" id="" multiple><option value="">小明</option><option value="">小波</option><option value="">小冲</option><option value="">小黄</option></select></p><p>info:<textarea name="" id="" cols="30" rows="10"></textarea></p><input type="submit" value="用户注册"><input type="reset" value="重置内容"><input type="button" value="普通按钮"></form>
开发工程师必备————【Day17】前端HTML基础知识点相关推荐
- Web前端开发工程师必备技术列表
WEB标准,Web前端开发工程师必备技术列表 想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接& ...
- android 技能标签功能_android开发工程师必备技能
厚 学 网 android 开发工程师必备技能 android 软件开发工程师是 Android 平台发展中不可或缺的人才要素. 据介 绍,就我国目前来说, Android 研发人才缺口至少 30 万 ...
- 【珍藏版】 2012Java开发工程师必备精品资料（115个）
2019独角兽企业重金招聘Python工程师标准>>> Java应用广泛,涉及个人PC.数据中心.游戏控制台.科学超级计算机.移动电话和互联网等领域,同时拥有全球最大的开发者专业社群 ...
- 大数据开发工程师必备技能有哪些？
大数据开发工程师必备技能有哪些?随着全行业数字化转型和新基建时代的到来,对技术人才提出了更高的要求.不管是面试还是实际工作过程中,数据工程师要时时刻刻面对这些层出不穷的技术演进. 随着数据的爆发式增长 ...
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
- 前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...
- 前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧 把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
- WEB标准,Web前端开发工程师必备技术列表
想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的.我结合自己的团队配备, ...
- 软件测试工程师必备的27个基础技能【快来看看有没有遗忘的】
混迹于软件测试行业8年有余,这么长时间了,一直想写一篇关于软件测试的经验分享的文章,但苦于工作原因迟迟未下笔.最近终于有了些闲余时间,遂决定把自己的心路历程及所感所想记录下来,与各位同行共勉. 以我多 ...
最新文章
- input添加disabled属性出现的移动端兼容问题
- 服务器文件描述,服务器编程中的文件描述符
- SAP云平台CloudFoundry环境里新建SAP UI5应用后，自动生成了哪些组件
- 立即学习AI：03-使用卷积神经网络进行马铃薯分类
- 项目启动及需求分析（靳嘉豪、胡新宇、李晨曦、杨航、李瑶）团队作业
- c# 计算空格宽度像素_用pythonnet为计算机视觉做图像整理
- win7系统任务管理器被禁用怎么解决
- 谈谈社群收割用户的六板斧
- Python字符串split()和join()方法应用一例
- 【OpenCV应用】python处理行李图像匹配项目——图像直方图应用与明暗变换
- GDAL源码剖析（八）之编译GEOS和PROJ4库
- Java操作Mysql实例
- AFNetworking 图片的本地缓存问题
- python3 中文繁体转换简体，简体转换为繁体，汉字转换拼音
- java连接sftp工具类
- 100行代码实现最简单的基于FFMPEG+SDL的视频播放器（SDL1.x）
- 如何判断打码平台哪个好
- 高仿QQ讨论组头像拼图
- 标题：子网掩码划分，交换机，SecureCRT命令行
- 财政政策失灵，货币政策失灵