常用飞速键,  主体标记  位于&lt

一、Html 结构

 

1.壹 、HTML基本文书档案格式—<html> 标记

   —<html>文书档案的头顶好和主导内容 </html>  根标记

—<head> 文书档案的头顶消息</head>  底部标记 只能有一些

—<title>展现在浏览器窗口的标题栏中“网页名称”</title>  位于<head>标记之内

—<body></body>
  主体标记  位于<html>之内,<head>标记之后

<!doctype html>  注解文档类型

<html> 跟标签

<head>   尾部标签

<title></title>    标题签

</head>

<body>

</body>

……

</html>

 

 

1.② 、HTML 标签关系

嵌套关系:<head><title></title></head>     父子

并称关系:<head></head><body></body>     兄弟姐妹

 

1.三 、 HTML 标签分类

    双标记  <标记名></标记名> :<font ></font >、<p
> </p> 等

    单标记  <标记名/> :注释、 <br/> 、<!Doctype
html>、<hr/>

 常用火速键

二、标签

2.1 单标签

◆注释标签    ctrl+/

◆ 换行标签   <br />

◆ 水平线标签  <hr />

Ctrl+c

复制

Ctrl+v

粘贴

Ctrl+x

剪切

Ctrl+a

全选

Ctrl+s

保存

Ctrl+z

撤销一步

Windows+d

返回桌面

Windows+e

我的电脑

Windows+r

打开运行

Alt+tab

切换软件

Ctrl+tab

软件文档之间的切换

F2

重命名

F5

刷新页面

2.2 双标签   

1.<p>文本内容</p>
  
性子:上下自动生成空白行。<br>换行不会生成空白行。

2.题名标签  h1-h6  取值到h6

h1 在二个页面里只可以出现一遍。
 (seo)

3.文本标签  <font>文本内容</font>

4.文本格式化标签

 文本加粗标签
  <strong></strong>   <b></b>  工作里尽量采用strong

 文本倾斜标签 <em></em>     <i></i>     工作里尽量接纳em

 删除线标签 <del></del>     <s></s>   工作里尽量选用del

 下划线标签(插入文本)<ins></ins>   <u></u>
   工作里尽量ins

◆注意:之所以工作里选拔<strong></strong>、
 <em></em>、
<del></del>、<ins></ins>  是因为更有语义化(浏览器读起来更笑容可掬)。

2 认识大前端

2.3图形标签

<img src=”3.gif” alt=”岳云鹏(Yue Yunpeng)(Yue Yunpeng)” title=”小编的天呐!” width=”300″
height=”200″ />

Src    图片的源点   必写属性

Alt    替换文本    图片不展现的时候显得的文字

Title   提醒文本    鼠标放到图片上海展览中心示的文字

Width  图片宽度

Height  图片中度

◆PS:图片并未定义宽高的时候,图片遵照总体比例展现,即使只变动图片的肥瘦大概中度,图片等比例缩放。

 

2.1 前端正是将成效图生成网页,利用html+css+js等技巧。

三、路径

1. 相对路径   (争辩于文件自个儿出发,正是相对路径)

◆文件和图片(html文书档案)在同1个目录(文件夹) ,间接写文件名。  <img src=”1.pig”
alt=”” />

◆图片(html文书档案)在文书的下一级目录里。文本夹名称+/+图片(html**文件)名称**  <img src=”图片/1.pig”
alt=”” />

◆图片(html)在文书的上顶级目录里,..+/+图片(html**)名**称   <img src=”../1.pig”
alt=”” />

◆图片在文件的上一流的其他目录里,../文件夹名称/**图片名称**   <img
src=”../练习/1.pig” alt=”” />

★总计:找到下一流目录(文件夹)的图纸(文件)用
/       跳出当前目录使用../

2.绝对路线

<img src=”F:\前端开发基础知识\练习\1.pig” alt=”” />     <!–
电脑上的相对路径 –>

2.2 Pc端  移动端

四、超链接

<a href=”林志玲女士.html” title=” 我的女神”
target=”_blank”>超链接</a>

  href   去往的路子(跳转的页面)
必写属性

  title    提醒文本
  鼠标放到链接上显得的文字

  target=”_self”    暗中同意值
   在本身页面打开(关闭自个儿页面,打开链接页面)
 

  Target=”_blank”   打开新页面
(本身页面不倒闭,打开三个新的链接页面)

2.3 用户体验

4.1 锚链接

1.先定义2个锚点 <p id=”sd”>

2.超链接到锚点 <a herf=”#sd”>回到顶点</a>

2.4 学习态度

养成一种习惯。

4.2 空链  

3 认识网页

  不知道链接到那些页面包车型客车时候,用空链

  <a
herf=”#”>空链</a>

3.1 网页由文字、图片、输入框、录制、音频、超链接等构成。

4.2 压缩文件下载(不推荐应用)

<a herf=”../../练习.rar”>压缩包</a>

3.2 Web标准

W3c协会(万维网结盟)

Html    结构正式
      极度人的肉身

Css    表现专业    10分与给人打扮
变的更优异

Js     行为专业
   想当与人在歌唱,页面更敏感。

4.3 超链接的优化写法

<base target=”_blank”>  让抱有的超链接都在新窗口打开

3.3 基本功班课程布署

Html      2天

Css       7天

Js        3天

  5、HTML 的特殊符号

图片 1

3.4 浏览器

◆浏览器是一个上网的客户端(软件)。

 

六 、列表

3.5 浏览器内核

渲染引擎

 

渲染引擎是包容性难点出现的根本原因。

6.一 、冬季列表

<ul>

  <li></li>    列表项

  <li></li>

  <li></li>

</ul>

图片 2

type=”square”      小方块
  type=”disc”       实心小圆圈
 type=”circle”      空心小圆圈

 

3.6 浏览器和服务器的那一点事

IIS  web服务器
    提供网页浏览服务

6.二 、有连串表

<ol>

    <li></li>    列表项

  <li></li>

  <li></li> 

</ol>

图片 3

效果:

图片 4

 

◆type=”1,a,A,i,I” type的值能够为1,a,A,i,I     

   start=”3”  决定了先导的职务。 

3.7 Url地址

Url地址就是大家说的网址。

 

 

6.3 自定义列表

<dl>

 <dt></dt>    小标题

  <dd></dd>   解释标题

  <dd></dd>   解释标题

</dl>

图片 5

 

4 认识html

7、音乐标签和滚动

 图片 6

滚动:

图片 7

图片 8

 

4.1 Hyper   text  markup   language

  超文本标记语言。

超文本:超链接。(达成页面跳转)

4.2 Html结构正式

< ! doctype html>    表明文书档案类型

<html>              根标签

<head>             头标签

<title></title>    标题的签

</head>

<body>             主体标签

</body>

 

</html>

 

Html 与htm是一模一样的。

后缀名不能够操纵文件格式,只好决定打开文件打开的不二法门。

4.3 Html标签分类

单标签   <! Doctype html>

双标签
  <html></html>   <head></head>
  <title></title>

4.4 Html标签关系分类

  蕴含(嵌套关系)
 <head><title></title></head>     父子

  并列关系
      <head></head><body></body>     兄弟姐妹

4.5 开发工具

 

Dw  历史悠久,设计师运用。

Sublime   轻量级
   有过多好用的插件。

Webstorm  重量级    太过智能。

 

新建文件、打开文件、打开文件夹

Html:xt+tab

Html结构代码

tab

补全标签代码

Ctrl+shift+d

快速复制一行

Ctrl+shiif+k

快速删除一行

Ctrl+鼠标左键单击

集体输入

Ctrl+h

查找替换

Ctrl+f

查找

Ctrl+/

注释

Ctrl+L

快速选择一行

Ctrl+shift+↑(↓)

快速上移(下移)一行

F11

全屏

 

 查看—-布局

sublime火速键使用: 

4.6 安装暗许浏览器

Chrome浏览器右上角,设置里选择设置暗中同意浏览器。

5 标签

5.1 单标签

◆注释标签    ctrl+/

 

◆ 换行标签   <br />

 

◆ 水平线标签  <hr />

 

 

5.2 双标签   

<p>文本内容</p>

 

天性:上下自动生成空白行。<br>换行不会生成空白行。

标题的签

h1-h6  取值到h6

h1 在1个页面里只可以出现一遍。

 

文件标签

<font>文本内容</font>

 

文本格式化标签

 文本加粗标签
  <strong></strong>   <b></b>  工作里尽量利用strong

 

 

文件倾斜标签

<em></em>     <i></i>     工作里尽量选用em

 

 

删除线标签

<del></del>     <s></s>   工作里尽量接纳del

 

 

下划线标签

<ins></ins>   <u></u>    工作里尽量ins

 

 

◆注意:之所以工作里应用<strong></strong>
 <em></em> <del></del>

<ins></ins>  是因为更有语义化。

5.3 图片标签

 

Src    图片的起点   必写属性

Alt    替换文本
   图片不显示的时候显得的文字

Title   提醒文本
   鼠标放到图片上显得的文字

Width  图片宽度

Height  图片高度

◆图片并未概念宽高的时候,图片依照总体比例显示,要是只改变图片的大幅只怕高度,图片等比例缩放。

6 路径

6.1 相对路径

相对于文件自己出发,正是相对路径。

◆文件和图片(html文书档案)在同两个目录(文件夹) ,直接写文件名。

 

◆图片(html文书档案)在文件在下一级目录里。文件夹名称+/+图片(html)名称

 

◆图片(html)在文件的上一流目录里,..+/+图片(html)名称

 

◆图片在文书的上一流的任何目录里,../文件夹名称/图片名称

 

★总结:找到下一流目录(文件夹)的图纸(文件)用 /

        跳出当前目录使用../

6.2 相对路径

 

7 超链接

 

href=”http://www.qianhtj.com”  去往的路径(跳转的页面) 必写属性

title=”解释性文字”    提示文本
  鼠标放到链接上呈现的文字

target=”_self”    默许值
   在自笔者页面打开(关闭自个儿页面,打开链接页面)
 

Target=”_blank”   打开新页面
(本人页面不闭馆,打开三个新的链接页面)

7.1 锚链接

1.先定义2个锚点

    

2.超链接到锚点

   

7.2 空链  不知道链接到那个页面包车型客车时候,用空链

 

7.3 压缩文件下载  不引进应用

7.4 超链接优化写法 <base target=”_blank”>   让拥有的超链接都在新窗口打开

 

8 另存为   ctrl+shift+s

9 特殊字符

 

10 列表

10.1 严节列表

<ul>

<li></li>    列表项

<li></li>

<li></li>

</ul>

 

type=”square”      小方块

Type=”disc”       实心小圆圈

Type=”circle”      空心小圆圈

10.2 稳步列表

<ol>

<li></li>    列表项

<li></li>

<li></li>

 

</ol>

 

◆type=”1,a,A,i,I” type的值能够为1,a,A,i,I

start=”3”  决定了起来的岗位。

10.3 自定义列表

<dl>

 <dt></dt>    小标题

  <dd></dd>   解释标题

  <dd></dd>   解释标题

</dl>

 

11 音乐标签

 

12 滚动

 

相关文章