html5 基础学习

 

1. 简单的快捷键使用

保存 ctrl+s

基础结构框架快捷键

shift+！或 html：5

注释（只有开发者能看见，使用者{用户}无法看见）

单行注释 ctrl+?/

多行注释 选择想注释的段落，选择后 ctrl+/

部分注释 alt+shift+a

审查元素的功能作用

右键

2.基础语法

html的基础语法 标记的写法

1.常规标记/双标记

2.空标记/单标记

总结

- 在尖角符号后面的第一个英文单词就是当前标记的名称

- 标记还可以称为标签或者元素

- 属性和标签名称之间需要加一个空格 一个标签可以有多个属性 属性是不区分前后顺序的

- 属性和属性值之间用等号相连 属性值用引号引起来

- 注意:单标签结束的反斜杠在标签名称的后面 可以写可以不写

3.标题字体

标题字体有限制h1-6

随着数字的增加，字体的大小逐渐变小，加粗效果逐渐减弱

快速选中添加的部分 ctrl+D 选中共有部分

SUPRA

SUPRA

SUPRA

SUPRA

SUPRA

SUPRA

效果如图

生成多项共同表示和内容的方法

标签$*若干数字

例如 h$*6 效果如下

增加文本 例如 h$*6{增加文本}

标签无变化 之变化共同文本内的数字

标签{文本}*若干数字

例如 li{这是第$个鸭子}*8 效果如下

4.段落标签的使用

标签名称：p

会自动换行，文本独占一行，行与行之间有间距，

段落文本的宽度会随着浏览器的可视窗口宽度进行变化

5.倾斜和加粗标签

倾斜标签: i em

加粗标签: b strong

- 用法上没什么区别 都可以使用

- 官方建议使用em和strong 并且加粗和倾斜效果会明显一点

单标签

- br 强制性的换行

- hr 横线

字符实体

-   不换行空格

- > >右尖括号

- <

- © 备案中图标

- &  &

6.列表标签的使用

分为无序列表、有序列表、自定义列表

1.无序列表

标签名称：ul li 嵌套使用

默认样式

实心圆符号

列表默认独占一行并且换行

有缩进效果

2.有序列表

默认名称：ol li 嵌套使用

拓展

type 类型 默认属性值为1

start 开始 属性值只能位数字

3.自定义列表

标签名称： dl dt/dd

7.超链接的使用

标签名称：a

默认样式

下划线

字体有颜色

鼠标指针会变成手指，引导吸引用户点击

属性

href 点击a所跳转的路径地址

title 提示文本

target 目标/目的 点击后打开新窗口的方式

_self 覆盖原来的窗口

_blank 打开新的窗口

例如 a href="http://www.4399.com" title="点击之后会跳转到4399首页" target="_self" >点击去4399a>

所得如下

点击后会跳转至4399小游戏

拓展（如果页面有几百个a标签，都要打开新窗口且不覆盖原窗口，

需要在head区域内写一个base标签

需求 如果点击a不想要其跳转某个地址 => 默认刷新浏览器

- href="#"

- javascript:; 阻塞

8.图片标签的使用

标签名称：img （Image preview）

属性

src 图片的路径地址

alt 当图片加载失败后所跳出的文本

title 提示文本 鼠标移入时候提示文本(所有的html标签都可以使用)

- width/height/border 宽/高/边框 px像素

可以直接只用图片的路径地址/将图片保存至文件里，在选择图片的地址

（如若有错，请及时纠错，小白欢迎纠错）