Web学习HTML部分笔记

Web学习

IDEA 常用快捷键

按键&缩写 function
Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者// )
Shift+F6 重构-重命名
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+G 查找行
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
写代码,按Tab 生成代码
选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按Esc高亮消失。
Ctrl+B 快速打开光标处的类或方法
Ctrl+E 最近打开的文件
Alt+F1 查找代码所在位置
Ctrl+Alt+L 格式化代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+P 方法参数提示
Ctrl+shift+c 拷贝文件路径
Ctrl+alt+shift+c 拷贝相关数据 包括路径和所在行
Ctrl+shift+v 从历史记录中粘贴
ctrl+Y 删除整行
ctrl+shift+enter 新建行
ctrl+alt+enter 在当前行前面新建行
Ctrl+Shift+N 查找文件
缩写 function
html:5 HTML5结构
link:css 引入css
script:src 引入js
ul+ ul及一个li
script html中插入js
a:link < a h r e f=”h t t p : / / ” > < / a >
a:mail < a h r e f =” mailto : “>< / a>
form:get get表单
input:hidden hidden输入框
div#name id:name
div . name class:name
div.one.two class:one,two
head>link:css head加link
p+p 两个p
p*3 3个p
ul>li.item$*6 创建ul下有个li同时class分别为item1,item2..
pos postion,组合可用pos 😒、a、r、f
t top,组合a auto
r right,组合 a
l left
b bottom
z z-index
fl float
cl clear
d display 组合可用n、b、i、ib
v visibility
ov overflow
zoo zoom:1
cp clip
bx box-sizing
bxsh:w -webkit-box-shadow:0 0 0 #000;

XML

  • 可扩展标记语言 extension markup language 定义文档结构

HTML(素颜)

W3C定义的语言标准,描述页面结构的语言,超文本标记语言
结构:有什么东西,东西是干什么用的。
  • MDN:developer mozilla network .Mozilla开发者社区。

CSS:(化妆)

W3C定义语言标准:描述页面展示,CSS决定网页长相

执行HTML CSS

HTML、CSS-浏览器执行->页面

  • 浏览器 :
    • shell:外壳
    • core:内核(JS执行引擎,渲染引擎)
    • 具有独立内核的浏览器:
      • IE:Trident
      • Firefox:Gecko
      • Chome:Webkit/blink
      • Safari:Webkit
      • Opera:Presto(弃用)/Blink

版本&兼容性:

HTML5、CSS3
html5:2014年
CSS3:目前还没有制定完成。

XHTML:可以认为是HTML的一种版本。完全符合XML的规范

  • 注释:
    • 热键ctrl+?
<!--注释-->
  • 元素:
eg:<a>XXXX</a>
  • 元素=起始标记(a)+元素内容(XXXX)+元素属性(非必须)+结束标记(/a)
  • 属性=属性名+属性值
  • 属性分类:
    • 局部属性:某些元素特有的属性。
    • 全局属性:所有元素通用。
    • 空元素:有些元素没有结束标记。
      • 两种写法:
1.<meta charest="UTF-8">
2.<meta charest="UTF-8"/>(可有可无)
  • 元素嵌套:
    • 元素不能相互嵌套
正确eg:
    <a><b></b></a>
错误eg:
      <a><b></a></b>
  • 父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)
  • 标准文档结构:

<!doctype html>
<!--文档声明,每个代码第一行必须是这个,不是元素,告诉浏览器当前文档使用的HTML标准是HTML5,无此声明显示不正常(怪异渲染模式)-->
<html lang="en">
<!--根元素,一个页面最多一个,并且该元素是全体元素的父元素&祖先元素,H5标准中(html)无所谓,最好写上,lang属性:表示language,全局属性,表示该元素内部使用的是哪一种自然语言书写而成,切换汉语:cmn-hans(过时:zh-CN   )-->
<head>
<!--文档头 文档头内部内容,不会显示到页面上-->
    <meta charset="UTF-8">
<!--文档元数据:
meta:附加信息
charest:指定网页内部编码
-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <!--适配器-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--建议使用何种内核-->
    <title>Document</title>
    <!--页面标签栏出现 -->
</head>
<body>
</body>
<!--文档体,页面上所有要参与显示的元素都应该放置到这里-->
</html>

语义化

  • 每一个HTML元素都有具体的含义
    • 所有元素与展示效果无关,元素展示到页面中的效果应有CSS决定


      选择什么元素取决于内容含义,而不是显示出的效果
  • 为什么需要语义化:
    • 是为了搜索引擎优化(SEO)
      • 每隔一段时间,搜索引擎就会从整个互联网中,抓取页面源代码。搜索排名和页面质量挂钩
    • 为了让浏览器理解网页
      • 阅读、语音模式

文本元素

HTML支持的元素:HTML元素周期表

  • h(head)
    h1h6,一级标题六级标题
h$*6{$级标题}
  • p
p*6>lorem

lorem
乱数假文

  • span
    • 无语义元素,仅用于设置样式

    • 某些元素显示时会独占一行(块级元素),有些不会(行级元素)
      (HTML5已弃用)

    • pre

    • 预格式化文本元素

    • 空白折叠:在源代码中的连续空白字符(空格,换行,制表),在页面显示时会被折叠成一个空格

    • 例外:在pre中的连续空白元素不会被折叠(本质:有一个默认的CSS属性)

显示代码时,通常在外面套CODE元素,CODE表示代码区域

  • HTML实体
    • 实体字符,HTML entity(在页面上出现一些特殊符号)
    • 特殊符号整理
    • &符号:
&amp;

a元素

  • 超链接

  • 写法:

  • href属性: hyper reference(印用)通常表示跳转地址

    • 跳转地址
    • 跳转到某个锚点
      • id属性:全局属性,表示元素在文档中的唯一编号
    • 功能性链接:点击后触发某些功能
      • 点击后触发JS代码javascript:
      • 发送邮件,mailto:
      • 拨号,tel:
  • target属性:表示跳转窗口的位置

    • _self:表示在当前页面窗口中打开,默认值
    • _blank:新窗口中打开
使用方法:
...
<a herf="#id">对应名称</a>
<h id="id">对应名称</h>
...
回到顶部 id=null(什么都不要打)

路径的写法

站内资源&站外资源、绝对&相对路径

  • 站内资源:当前网站的资源;相对路径
  • 站外资源:非往前网站资源;绝对路径(只能使用)
    • 绝对路径书写格式:
      • url:
协议名://主机名:端口号/路径 
schema://host:port/path
  • 绝对路径协议不准省略
  • 当跳转目标与当前页面的协议相同时,可以省略协议
  • 相对路径:
    - 以./开头,./表示当前资源所在目录,../为返回上一级目录
    - 相对路径中:./可以省略

图片元素

img缩写,空元素,可以和a元素联用

写法:

1、<img="aderss" alt="信息">
2、<a herf="地址">
<img="aderss" alt="信息">
</a>
  • map元素:
<img  usemap="#id" src="adress"alt="photo">
<map name="id">
    <area shape="" coords="" herf="" alt="" target="">
</map>

src属性:source

fiugre元素:指代 定义通常用于把图片标题、描述包裹起来

  • figure&figcaption

多媒体元素

  • video元素:
<video src="http://101.201.66.156:8080/video/video.mp4" controls="controls">123</video>

controlS:控制控件的显示,取值只能为controls
某些属性只有01两种状态,布尔属性
- autoplay有些浏览器会拒绝
- muted
- controls
- loop

  • audio:

兼容性:

1、旧版本的浏览器不支持这两个元素
2、不同浏览器音视频格式可能不一致(MP4,webm)
建议书写:

<audio  controls autoplay>111
    <source src="http://101.201.66.156:8080/audio/DJ Blyatman - Cyka Blyat.mp3">
</audio>

列表元素

有序列表

ol:ordered list
表示整个列表
li: list item
列表里的每一项

<ol type:="">(逻辑上很重要使用此项,否则使用CSS)(倒序reversed)
    <li>开仓</li>
    <li>被插针</li>
    <li>天台见</li>
</ol>

无序列表

<ul></ul>
  • 常用作菜单&新闻列表(常见※)

定义列表

术语定义(用的不多)

  • dl:difinition list
  • dt:difinition title
  • dd:difinition description

容器元素(很NM重要)

  • 该元素代表一个块区域,内部用于放置其他元素

div元素

  • 没有语义

语义化容器元素

  • header:通常表示页头
  • footer:通常表示页脚,或尾部
  • article:通常表示整篇文章
  • section:通常用来表示文章的章节
  • aside:通常表示侧边栏(不太重要的信息可放于此)

有了好的结构才有好的样式

以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外

元素的包含关系由元素的内容类别决定。

例如:查看h1元素中是否可以包含P元素。
总结:
1.容器元素中可以几乎包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
4.标题元素和段落元素不能相互嵌套,并且不能包含容器元素。

posted @ 2020-02-26 08:25  Mr.Stark丿  阅读(306)  评论(0编辑  收藏  举报