zoukankan      html  css  js  c++  java
  • HTML基础

    1、HTML注释

    Vscode插件,快速生成HTML页面,操作,!+ tab键
    
    HTML注释:
    <!-- 注释内容 -->

    2、元素属性

    其他说法:标签
    
    元素 =  起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
    属性 = 属性名 + 属性值
    
    属性分类:
    - 局部属性:某些元素特有的属性
    - 全局属性:所有元素通用
    
    
    ## 元素的嵌套
    
    元素不能相互嵌套
    
    父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)

     3、文本元素

    
    
    ## h
    标题:head
    
    h1~h6:表示1级标题~6级标题
    
    ## p
    
    段落,paragraphs
    
    > lorem,乱数假文,没有任何实际含义的文字
    
    ## span【无语义】
    
    没有语义,仅用于设置样式
    
    ## pre
    
    预格式化文本元素
    
    空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠为一个空格
    
    例外:在pre元素中的内容不会出现空白折叠
    
    在pre元素内部出现的内容,会按照源代码格式显示到页面上。
    
    该元素通常用于在网页中显示一些代码。
    
    pre元素功能的本质:它有一个默认的css属性
    
    > 显示代码时,通常外面套code元素,code表示代码区域。

    4、HTML实体

    # HTML实体
    
    实体字符, HTML Entity
    
    实体字符通常用于在页面中显示一些特殊符号。
    
    1. &单词;
    2. &#数字;
    
    
    - 小于符号
    
    &lt;
    
    - 大于符号
    
    &gt;
    
    - 空格符号
    
    &nbsp;
    
    - 版权符号
    
    &copy;
    
    - &符号
    
    &amp;

    5、a元素

    # a元素
    
    超链接
    
    ## href属性
    
    hyper reference:通常表示跳转地址
    
    1. 普通链接
    2. 锚链接
    
    id属性:全局属性,表示元素在文档中的唯一编号
    
    3. 功能链接
    
    点击后,触发某个功能
    
    - 执行JS代码,javascript:
    - 发送邮件,mailto:
    
    要求用户计算机上安装有邮件发送软件:exchange
    
    - 拨号,tel:
    
    要求用户计算机上安装有拨号软件,或使用的是移动端访问
    
    ## target属性
    
    表示跳转窗口位置。
    
    target的取值:
    
    - _self:在当前页面窗口中打开,默认值
    - _blank: 在新窗口中打开

    6、img元素

    # 图片元素
    
    ## img元素
    
    image缩写,空元素
    
    src属性:source
    
    alt属性:当图片资源失效时,将使用该属性的文字替代图片
    
    ## 和a元素联用
    
    ## 和map元素
    
    map:地图
    
    map的子元素:area
    
    衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:
    
    ps、pxcook、cutpro(本人开发)
    
    ## 和figure元素
    
    指代、定义,通常用于把图片、图片标题、描述包裹起来
    
    子元素:figcaption

    7、多媒体元素

    # 多媒体元素
    
    video 视频
    
    audio 音频
    
    ## video
    
    controls: 控制控件的显示,取值只能为controls
    
    某些属性,只有两种状态:1. 不写   2. 取值为属性名,这种属性叫做布尔属性
    
    布尔属性,在HTML5中,可以不用书写属性值
    
    autoplay: 布尔属性,自动播放。
    
    muted: 布尔属性,静音播放。
    
    loop: 布尔属性,循环播放
    
    ## audio
    
    和视频完全一致
    
    
    ## 兼容性
    
    1. 旧版本的浏览器不支持这两个元素
    2. 不同的浏览器支持的音视频格式可能不一致
    
    mp4、webm

    8、列表元素

    # 列表元素
    
    ## 有序列表
    
    ol: ordered list
    
    li:list item 
    
    ## 无序列表
    
    把ol改成ul
    
    ul:unordered list
    
    无序列表常用于制作菜单 或 新闻列表。
    
    ## 定义列表
    
    通常用于一些术语的定义
    
    dl: definition list
    
    dt: definition title
    
    dd: definition description

    9、容器元素

    # 容器元素
    
    容器元素:该元素代表一个块区域,内部用于放置其他元素
    
    ## div元素
    
    没有语义
    
    ## 语义化容器元素
    
    header: 通常用于表示页头,也可以用于表示文章的头部
    
    footer: 通常用于表示页脚,也可以用于表示文章的尾部
    
    article: 通常用于表示整篇文章
    
    section: 通常用于表示文章的章节
    
    aside: 通常用于表示侧边栏

    10、容器元素

    # 容器元素
    
    容器元素:该元素代表一个块区域,内部用于放置其他元素
    
    ## div元素
    
    没有语义
    
    ## 语义化容器元素
    
    header: 通常用于表示页头,也可以用于表示文章的头部
    
    footer: 通常用于表示页脚,也可以用于表示文章的尾部
    
    article: 通常用于表示整篇文章
    
    section: 通常用于表示文章的章节
    
    aside: 通常用于表示侧边栏

    11、元素包含

    # 元素包含关系
    
    以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
    
    元素的包含关系由元素的内容类别决定。
    
    例如,查看h1元素中是否可以包含p元素
    
    总结:
    
    1. 容器元素中可以包含任何元素
    2. a元素中几乎可以包含任何元素
    3. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
    4. 标题元素和段落元素不能相互嵌套,并且不能包含容器元素

    12、路径

    # 路径的写法
    
    ## 站内资源和站外资源
    
    站内资源:当前网站的资源
    
    站外资源:非当前网站的资源
    
    ## 绝对路径和相对路径
    
    站外资源:绝对路径
    
    站内资源:相对路径
    
    1. 绝对路径
    
    绝对路径的书写格式:
    
    url地址:
    
    ```
    协议名://主机名:端口号/路径
    
    schema://host:port/path
    ```
    
    当跳转目标和当前页面的协议相同时,可以省略协议
    
    2. 相对路径
    
    以./开头,./表示当前资源所在的目录
    
    可以书写../表示返回上一级目录
    
    相对路径中:./可以省略
  • 相关阅读:
    marquee基本语法和marquee的相关参数设置
    [转]FreeTextBox使用详解
    div+css三级下拉菜单无限制下拉
    让Flash在Firefox和IE下背景透明
    asp.net制作幻灯片
    图片连续滚动代码,左右连续,上下连续不间断滚动
    纯DIV+CSS下拉菜单
    连续滚动图片代码
    sql语句修改access中的字段类型,access数据类型大全!
    非常棒的图片连续滚动代码
  • 原文地址:https://www.cnblogs.com/Iceredtea/p/14853522.html
Copyright © 2011-2022 走看看