一、开发工具: 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)的更多相关文章

  1. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  3. 前端开发概述+JS基础细节知识点

    一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...

  4. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  6. 003.前端开发知识,前端基础CSS(2020-01-07)

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

  7. 007.前端开发知识,前端基础CSS(2020-01-28)

    一.布局 一列固定宽度且居中 两列左窄右宽型 通栏平均分布型 1.一列固定宽度且居中布局<body> .top+.banner+.main+.footer 按Tab键,得到下框中代码 &l ...

  8. 006.前端开发知识,前端基础CSS(2020-01-21)

    来源:第五天  01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...

  9. 005.前端开发知识,前端基础CSS(2020-01-14)

    一.CSS权重 权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> ...

随机推荐

  1. CCCC 正整数A+B

    题意: 本题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000].稍微有点麻烦的是,输入并不保证是两个正整数. 输入格式: 输入在一行给出A和B,其间以空格分开.问题是A和B不 ...

  2. ARDUINO+MCP2515实现CAN通讯接收

    我的学习过程有几个关键点: 1.MCP2515 CAN总线模块与ARDUINO UNO R3的接线方式: 2.程序set_mask_filter_recv的参数设置,mcp_can_dfs.h库文件设 ...

  3. linux 下shell 编写脚本

    linux 下shell 编写脚本: 1.程序结构练习:编写一个脚本,给定一个正整数,计算出这个数所有位的数字之和. 例如:程序给定输入123,那么应该返回1+2+3=6. 2.程序结构练习:编写一个 ...

  4. idea 2019.3 最新破解补丁和激活码,可破解至2089年!

    链接:https://blog.csdn.net/qq_42914528/article/details/85617901 上面方法失效了,请尝试以下方式激活(2020.1.6更新) idea激活码( ...

  5. .NET CORE 热更新,否则提示DLL文件在使用中

    1.创建空目录,取名updatesite,里面放置app_ffline.htm文件,网站更新中访问使用,内容随意 2.updatesite目录下面创建Release目录,用于放置更新的dll文件 3. ...

  6. ubuntu root用户下找不到环境变量解决办法

    打开 gedit /root/.bashrc   ,在文件的末尾添加: source /etc/profile 然后执行更新:source /root/.bashrc

  7. MySQL高负载优化

    MySQL配置文件优化 [client] port = #客户端端口号为3306 socket = /data//mysql.sock # default-character-set = utf8 # ...

  8. CVPR2019 | 超越Mask R-CNN!华科开源图像实例分割新方法MS R-CNN

    安妮 乾明 发自 凹非寺 本文转载自量子位(QbitAI) 实习生又立功了! 这一次,亮出好成绩的实习生来自地平线,是一名华中科技大学的硕士生. 他作为第一作者完成的研究Mask Scoring R- ...

  9. Linux-让程序不能多次运行

    1.因为守护进程是长时间运行而不退出的,因此./a.out执行一次就有一个进程,执行多次就有多个进程. 2.这样并不是我们想要的.我们的守护进程一般都是服务器,服务器程序只要运行一个就够了,多次同时运 ...

  10. 约数个数函数(d)的一个性质证明

    洛谷P3327 [SDOI2015]约数个数和 洛谷P4619 [SDOI2018]旧试题 要用到这个性质,而且网上几乎没有能看的证明,所以特别提出来整理一下. \[ d(AB) = \sum_{x| ...