001.前端开发知识，前端基础HTML（2020-01-07）
一、开发工具： chrome 、 sublime 、 photoshop
二、Web标准：不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
三、HTML的语言语法骨架格式
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
四、HTML标签分类
1.双标签 比如 <body>我是文字 </body>
2.单标签 比如 <br />
五、HTML标签关系
1.嵌套关系
<head> <title> </title> </head>
2.并列关系
<head></head>
<body></body>
六、文档类型
<!DOCTYPE html>
七、字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
八、HTML常用标签
1.排版标签——排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
2.标题标签——HTML提供了6个等级的标题
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
3.段落标签
<p> 文本内容 </p>
4.水平线标签
<hr />是单标签
5.换行标签
<br />
6.div span标签
div——分割， 分区的意思。由很多div 来组合网页。
span——跨度，跨距；范围
<body>
<div>我是布局1</div>
<div>我是布局2</div>
<span>布局用3</span>
<span>布局用4</span>
</body>
7.文本格式化标签——在网页中，有时需要为文字设置粗体、斜体或下划线效果
<body>
我是 <b>楚乔</b> 我是宇文玥 我是 <strong>燕洵</strong>
我是<i>倾斜</i>的 赶紧<em>脉动回来</em>
<s>原价： 1888</s>， 现价 8.8
<del>原价： 1888</del>， 现价 8.8
<u>特殊说明</u>
<ins>特殊说明</ins>
</body>
8.标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<hr width="400" />
9.图像标签img
<body>
<img src="timg.jpg" height="350" title="胡歌" />
<h3>title 鼠标放到图片上，显示的文字 </h3>
<img src="timg.gif" title="梅长苏" />
<h3>alt 图片显示不出的时候，替换的文字</h3>
<img src="timg1.gif" title="梅长苏" alt="我是梅长苏， 没了" />
<h3>border 图片边框</h3>
<img src="timg.gif" title="梅长苏" alt="我是梅长苏， 没了" border="10"/>
</body>
10.链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
友情链接:
<!-- <a href="去"></a>
<img src="来" > -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
搜狐
<a href="http://www.sina.com">新浪</a>
天气预报：
<a href="me.html">点击</a>
空链接 :
<a href="#">空</a>
产品 销售 首页 公司地址
<a href="http://www.baidu.com"><img src="bd.png" /></a>
</body>
</html>
11.锚点定位——通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two"> 2.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>
事例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>第1集(分集以TV版为准)</h3>
摇摇晃晃的囚车上
<h3 id="two">第2集</h3>
楚乔伤病还未痊愈
<h3 id="three">第3集</h3>
青山院灵堂肃穆，宇文玥一身孝衣</body>
</html>
12.base 标签
base 可以设置整体链接的打开状态；base 写到 <head> </head> 之间；把所有的连接 都默认添加 target="_blank"
13.特殊字符标签
14.注释标签
<!-- 注释语句 --> ctrl + / 或者 ctrl +shift + /
九、路径
路径可以分为： 相对路径和绝对路径
1.相对路径
（1）图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
（2）图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
2.绝对路径——绝对路径以Web站点根目录为参考基础的目录路径。
“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
001.前端开发知识，前端基础HTML（2020-01-07）的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- 前端开发概述+JS基础细节知识点
一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单：google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 003.前端开发知识，前端基础CSS（2020-01-07）
一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...
- 007.前端开发知识，前端基础CSS（2020-01-28）
一.布局 一列固定宽度且居中 两列左窄右宽型 通栏平均分布型 1.一列固定宽度且居中布局<body> .top+.banner+.main+.footer 按Tab键,得到下框中代码 &l ...
- 006.前端开发知识，前端基础CSS（2020-01-21）
来源:第五天 01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...
- 005.前端开发知识，前端基础CSS（2020-01-14）
一.CSS权重 权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> ...
随机推荐
- Arduino串口的一些高级用法
1.配置串口通信数据位.校验位.停止位通常我们使用Serial.begin(speed)来完成串口的初始化,这种方式,只能配置串口的波特率.而使用Serial.begin(speed, config) ...
- Linux(CENTOS7) NodeJs安装
1.下载NodeJs 官网下载地址:http://nodejs.cn/download/ 2.上传到linux系统 我这里上传到/disk/nodejs目录下面的,上传工具使用的xftp. 3 ...
- SpringCloud学习之Bus消息总线实现配置自动刷新（九）
前面两篇文章我们聊了Spring Cloud Config配置中心,当我们在更新github上面的配置以后,如果想要获取到最新的配置,需要手动刷新或者利用webhook的机制每次提交代码发送请求来刷新 ...
- 对python里的装饰器
内裤可以用来遮羞,但是到了冬天它没法为我们防风御寒,聪明的人们发明了长裤,有了长裤后宝宝再也不冷了,装饰器就像我们这里说的长裤,在不影响内裤作用的前提下,给我们的身子提供了保暖的功效. 再回到我们的主 ...
- 工程日记之HelloSlide(2) ： UITextView中如何根据给定的长宽，计算最合适的字体大小
需求描述 一般的需求是将UITextview的大小自适应文本高度,会做出随文本内容增加,文字框不断增大的效果: 本文反其道而行之,在给定文字框大小的情况下:字数越多,字体越小: 需求来源: 考虑将文字 ...
- 2020牛客寒假算法基础集训营4 H坐火车
题目描述 牛牛是一名喜欢旅游的同学,在来到渡渡鸟王国时,坐上了颜色多样的火车. 牛牛同学在车上,车上有 n 个车厢,每一个车厢有一种颜色. 他想知道对于每一个正整数 $ x \in [1,\ n] $ ...
- 一个算法题--Self Crossing
You are given an array x of n positive numbers. You start at point (0,0) and moves x[0] metres to th ...
- 前端 Docker 镜像体积优化
如果 2019 年技术圈有十大流行词,容器化肯定占有一席之地,随着 Docker 的风靡,前端领域应用到 Docker 的场景也越来越多,本文主要来讲述下开源的分布式图数据库 Nebula Graph ...
- 直击JDD | 京东开启技术服务元年：携手合作伙伴，共创产业未来
11月19日,主题为"突破与裂变"的2019京东全球科技探索者大会(JDDiscovery)在京盛大开幕.京东集团副总裁黎科峰在JDD主论坛做了题为"技术驱动.开放赋能& ...
- 京东云携手Mellanox，设计最先进SDN硬件加速功能并开源
京东云携手Mellanox,设计最先进SDN硬件加速功能并开源 最新技术播报 京东云开发者社区 导语新一代 SDN.NFV 和云原生计算技术正在推动应用实例的极限,这些实例可以在虚拟化和容器化的服务 ...