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 on 2020-02-26 08:25  Mr.Stark丿  阅读(336)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 Mr.Stark丿
Powered by .NET 9.0 on Kubernetes