HTML 常用快捷键,HTML介绍

一、
1、修改主题
2、
3、修改
4、长代码换行
file–setting–general–wrap–对勾选中
5、新建项目
file–new–project
6、关联浏览器
file–setting–tool–web borther–复制路径–apply–ok
二、快捷键
1、修改快捷键主题
file–setting–keymap–eclipse
2、复制当前行
ctrl+alt+向下键
3、删除当前行| 删除多行
ctrl+D
4、自动补全
eg:p-tab
5、生成多个
eg:p*10-tab自动补全
6、统一编辑
shift-enter
7、快速换行
shift+enter
8、注释
(1)单行注释|取消单行注释
CTRL+/
(2)多行注释|取消多行注释
CTRL+shift+/
9、文本
eg:p{hkjdsfh}-tab
10、p>p{文本}*5–tab
11、在vscode中快捷键
。 :Shift+Alt+A
。代码格式化:Shift+Alt+F
。向上或者向下移动一行:Alt+Up 或Alt+down
。快速复制一行:Shift+Alt+Down或Shift+Alt+Up
。快速查找:Ctrl+F
。快速替换:Ctrl+H

三、HTML介绍(了解)

1、HTML

超文本标记语言

HyperText Markup Language

2、作用

写网页结构内容(网页中有啥)、eg:文字、图片、搜索框等

3、文件后缀

.html 或者 .htm

4、HTML由浏览器解析执行,由上往下,由左往右顺序

5、HTML不区分大小写,建议小写

6、标签 标记

HTML由标签组成

标签是由尖括号包含的关键词

双标记 封闭类型标记 eg:

单标记 非封闭类型标记 空标记 eg

7、元素

指开始标记到结束标记之间的所有内容

eg:

hanhanhanhan

8、属性

作用:用来描述HTML的标签

语法:

双标记写在开始标记里面,用空格隔开

单标记写在/前面,用空格隔开

一个元素可以有多个属性,多个属性用空格隔开,不区分前后顺序

属性=“属性值”

<img src="" alt="">

9、元素之间可以相互嵌套

注意嵌套顺序

10、注释

浏览器不解析注释

注意:注释之间不可以相互嵌套

11、生成有序的多个

$*number-tab
12、文档类型说明
<!DOCTYPE html>
四、标签(掌握)

1、网页的标题标签

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
一号标题最大,逐级递减,默认水平居左,加粗

align=“left/center/right” 设置元素内容的水平对齐方式

2、段落标记

<p></p>

3、换行

4、 水平线


​ 属性:color:颜色

​ width:长度

​ size:水平线的高度

​ align:水平对齐方式,默认center

5、图片

src:路径 必须属性

alt:图片不能正常显示时给予提示

title:鼠标悬停给予提示

width:元素的宽度

height:元素的高度

HTML默认单位为px,当单位px时,可以省略

6、路径

(1)绝对路径

​ 网址,盘符

(2)相对路径

​ 。平级

​ 。下一级 /

​ 。上一级 …/ 上两级 …/…/

7、IDE(集成开发环境)与浏览器

<!DOCTYPE html>  不是html标签

H5文档类型说明 作用:告诉浏览器按当前标准解析代码

H5不区分大小写,双标记的结束标签可以省略,单标签的/可以省略

浏览器的模式:混杂模式(没有文档类型说明)

​ 标准模式(有文档类型说明)

8、超链接

(1)作用:跳转

(2)标签:>

(3)属性

​ href:路径

​ target:设置打开的窗口,默认值:_self(原窗口打开) ,

​ _black(新窗口打开)

​ name:锚点(跳转到具体的位置)

(4)锚点

。点击a跳转到a

<a href="#tz" >跳转到</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" name="tz">到我</a>

。点击a跳转到块级元素

<a href="#dd" >跳转到</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="dd">到我</p>

(5)空连接
href=“#” 返回页面顶部

4、块级元素和行内元素的区别
(1)块级元素独占一行,行内元素在同一行显示
(2)块级元素默认100%,行内默认由元素撑开
		%相对于父元素,浏览器默认字体大小为16px,行高为21px

(3)

9、无序列表

(1)

<!--ul>li*2>a[href="#"]{文本}-->
<ul>
    <li><a href="#">文本</a></li>
    <li><a href="#">文本</a></li>
</ul>

(2)ul和li的属性

type:设置项目符号的类型

取值:disc 默认值,黑色实心圆

circle 空心圆

square 实心矩形

none不显示

(3)无序列表可相互嵌套

10、有序列表

(1)

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

(2)ol和li的属性

type:设置项目符号的类型

start:设置从第几个开始,取值number

reversed倒序。当属性和属性值相同时。可简写为属性

11、自定义列表

(1)结构

<dl>
    <dt>主题</dt>
    <dd>描述</dd>
</dl>

12、表格

(1)作用:存储数据,向用户展示数据

(2)

<table></table> 表格
<tr></tr>行
<th></th>特殊的单元格,默认水平居中且加粗
<td></td>列  单元格

<!--table>tr*5>td{hhhh}*3-->
<caption></caption>表格的标题
<thead></thead>表格的的头部
<tbody></tbody>表格的主题
<tfoot></tfoot>表格的脚部

(3)table的属性

border 设置表格的边框

width宽度

height高度

align设置表格的对齐方式

bordercolor边框的颜色

bgcolor 背景颜色

background 背景图片 默认平铺

cell padding 设置内容距边框的距离

cell spacing设置单元格之间的距离 ,当取值为0,边框为一条线

(4)tr的属性

height行高

bgcolor 背景颜色

background背景图片

align行内容水平对齐方式 默认left,取值center|right

valign 行内容的垂直对齐方式,默认middle,取值top|bottom

(5)td的属性

width宽度

height高度

bgcolor 背景颜色

background背景图片

align行内容水平对齐方式 默认left,取值center|right

valign 行内容的垂直对齐方式,默认middle,取值top|bottom

colspan水平合并 取值number,

rowspan垂直合并

  • 12
    点赞
  • 132
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值