手记

HTML笔记

插件:

Chinese 中文插件

Live Server 插件 实时更新网页 (在html文件中,按ctrl+shift+p,选择 Open With Live Server)


VScode 配置 + 操作:

更换主题: 文件 -> 首选项 -> 颜色主题  Light + ( default light )

ctrl + 鼠标滚轮缩放字体   文件 -> 首选项 ->设置,搜索 “滚动” 勾上

按住鼠标滚轮,下拉,多行编辑


快捷键:

Sublime 快捷键扩展  集成 Sublime快捷键

ctrl + shift + d  复制当前行

ctrl + shift + ↑  上移当前行

ctrl + shift + ↓  下移当前行

ctrl + N 新建文件,保存要手动填写.html后缀

!+ tab 自动生成html 骨架

ctrl + /   快速注释


浏览器私有前缀:用来对实验性质得CSS属性加以标识

Chrome : -webkit-

Firefox : -moz-

IE、Edge : -ms-

欧朋 : -o-


HTML 骨架:

第一行必须是 DTD:文档类型声明  不写会引发浏览器兼容问题

HTML5: <!DOCTYPE html>

<head>标签对是网页的配置,不是网页的头部

<body>标签对是网页的内容,包括网页头,主要内容和页脚

<meta>标签表示网页的基础配置

<meta>: name属性 = Keywords(页面搜索关键词)  Description(页面描述)   提高seo搜索性能


标签:

<h1></h1> 系列标签 有 h1 ~ h6  通常一个网页只有一个 h1标签,多了会被百度认为是在"作弊"

<p></p>: 段落标签    h标签不能包含p , p 也不能包含 h


转义字符:

&lt;     小于号

&gt;     大于号

&nbsp;     空格

&copy;    版权符号©


HTML注释:   <!--  -->


class属性  类名:

页头 : header 、 logo: logo 、 导航条 : nav 、 横幅 : banner 、 内容部分: content 、 页脚 : footer




列表:

无序列表  ul  type属性 实心圆:desc    空心圆:circle      方形实心:square

有序列表  ol : type = "a / A / i / I / 1"   start = "一个整数"   reverse 倒序

定义列表  dl :  dt 定义项   dd : 定义内容   dt / dd 同级


img 标签:

引入 src  = "文件目录 / 文件命" 

代替品  alt = "图像文本描述"  图片无法加载时,浏览器会显示alt 属性的备用文本

width / height = "不用加px"    如果省略其中一个属性,表示按原始比例缩放图片(设置一个就好,会等比例缩放)


a 标签:

href = "url"  可以放相对链接 或者 绝对链接      ../  = 上级目录

url 后加 #id    移动到网页锚点位置 (在标签设置 id 当锚点)

直接 #top 返回页面顶部(html5)

href = "mailto:me@test.com"  自动打开Email相关软件  mailto: 前缀的链接是邮件链接

href 指向 exe、zip、rar等文件格式链接,自动变成下载链接  例如: href = "1.zep"

href = "tel: 12306" 自动打开拨号盘  tel: 前缀的链接是电话链接

title 设置鼠标移过去显示内容


audio(音频) 和 video(视频) 标签:

src = “链接”

controls属性显示播放控件

标签对中是对不兼容audio标签的浏览器显示文字

autoplay 自动播放(一般不用,浏览器可能会不允许自动播放音乐,需要用户手动点击)

loop 循环播放

常用音频格式: mp3 和 ogg 、 常用视频格式: mp4 和 ogv 、webm


<!-- 语义化标签 -->

html5区块标签:

section : 文档的区域,语义比div大

article:文档的核心文章内容,会被搜索引擎主要抓取

aside :文档的非必要相关内容,广告等

nav :导航条

header : 页头

main :  网页核心部分

footer : 页脚


span 标签 跨度分割,行内元素 用于标记


b 、u 、i  标签:已经被css代替 偶尔使用

b : 加粗文字     u : 加下划线    i : 倾斜文字


strong 、 em  、mark标签 :均表示强调语义

strong : 特别重要的文字

em : 强调文字

mark : 一段需要被高亮的文字


figure 、 figcaption 标签: 两个标签配合使用 

figure : 代表一段独立的内容

figcaption : 独立的引用单元,把一部分转移到别的地方不会影响到主体

<!-- 语义化标签结束 -->


<!-- form 表单标签 -->

action = “提交到后台程序的网址” method = "提交方式" (post 、 get)


<!-- input标签 : -->

type = "text" 文本框 : 

     value = "提前存在的文本框内容"  placeholder = "提示文本框输入内容"   disable : 停止文本框交互  

type = "radio" 单选按钮  要有 value属性值 ,向服务器提交的就是 value 的值  checked属性,默认选中  单选按钮的name属性要一致

type = "checkbox" 多选按钮  和单选按钮一样

type = "password"  密码框 

type = button  普通按钮  value = "按钮内容"

type = submit  提交按钮

type = reset  重置按钮

  html5新增 input 类型:  required 必填

time : 时间 、 color : 颜色 、 date :  日期  、 email : 邮件 、 number :数字 (min = "最小输入" max = "最多输入")

range : 拖拽条(min = "最小输入" max = "最多输入")、 search : 搜索框、 网址 :url 、 文件 : file


<!-- 下拉菜单 -->

select 标签标识下拉菜单、 option标签 是他的内部选项 (value属性、selected默认选中)


<!-- 多行文本框 -->

textarea 标签对  rows和cols 属性,用来定义多行文本框的行数和列数


<!-- lable 标签 -->

用来将文字与单选按钮绑定,点击文字也会视为点击了单选按钮(html5 包裹 单选按钮即可)(html4  单选按钮价加个id    lable标签加个 for = "id")


<!-- datalist控件 -->

为输入框提供一些选项,当用户输入的内容和备选项文字相同时,将会显示智能感应

例:  < input type = "text"  list = "province-list">

         <datalist   id = "province-list">

<option value = "山东">

<option value = "山东">

<option value = "山东">

         </datalist>


<!-- 表格标签 -->

<table> 包含 <tr>(table row)  包含 <td>(table data) / <th> 标题小格

border = "1" 属性 边框

caption标签 大标题 , 常常作为第一个子元素出现

width属性

colspan属性 单元格跨度      rowspan属性  行跨度   都是设置td/th的

thead 标签 表头,        tbody标签 表格内容、      tfoot 标签  表脚目的是为了清晰


1人推荐
随时随地看视频
慕课网APP