zoukankan      html  css  js  c++  java

  • HTML基本结构、语法以及常用标签

    前端的概述

    • web的发展史

      • web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易

      • web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博

      • web3.0

        • 人工智能

        • 复杂的页面功能

        • 即时通讯

    • web的前景

      • pc端的网页

      • 移动端的网页

      • ios android

    vscode编译器的使用

    • 快捷键

      • 复制本行到下一行 shift+alt+↓

      • 复制本行到上一行 shift+alt+↑

      • 查找 ctrl+F

      • 替换 ctrl+H

      • 同时写多行 1.按住鼠标滑轮向下滑动，可以出现多个光标 2.按住alt键，点击左键，可以不同位置，出现光标

    浏览器内核

    • 浏览器的渲染引擎，作用是解析我们代码成为画面

    • 五大浏览器及其内核(都是自主研发内核)

    • chrome谷歌firefox火狐opera欧朋ie（微软）safari(苹果)
      blink（webkit分支） gecko（高版本兼容谷歌内核） presto（后来版本改成blink） trident webkit

    • 360、qq、UC、搜狗： 双内核（blink&trident）

    网页三层结构

    • HTML 结构层--页面有什么东西

    • CSS 表示层--拥有的东西是什么样子的

    • JS(javascript) 行为层--用户的行为触发的事情

    HTML语言

    html定义

    • hyper text markup language （超文本标记语言），不是编程语言

    html文档(扩展名或者后缀名)

    • .txt .doc .xls

    • .html

    html基本语法

    • 标签结构

      • 开始标签开始，结束标签结束，内部可以包含文字或者其他标签

      • <关键字>
            文字内容
            <关键字>
                文字内容
            </关键字>
        </关键字>

      • 空标签，只有开始标签，没有结束标签

       

    • 标签属性

      • <cxl name="cxl" age="25" profession="singer"></cxl>

      • 标签的属性只能设置在开始标签。

    html基本结构

    • <!-- 不是标签，是一个声明，声明文档类型，告诉浏览器以哪种规范来解析文档，这是html5的写法 -->
      <!DOCTYPE html>
      <!-- html是文档的最大标签 -->
      <html lang="en">
      ​
      <!-- head头部标签，内部写，css样式，元信息，标题 -->
      <head>
          <!-- 
              设置字符编码格式
              gb2312 中文简体
              GBK 中文简体和繁体
              UTF-8 万国码，中文，英文，日文，韩文，法语
           -->
          <meta charset="UTF-8">
          <!-- 
              配置窗口信息（移动端需要配置）
           -->
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <!-- 文档的标题 -->
          <title>Document</title>
      </head>
      ​
      <body>
      <!-- body身体标签，内部写，所有的文档结构标签 -->
      </body>
      ​
      </html>

    •  

    常用标签

    常用块级标签及特点

    • div

      • 最常用的块级标签

      • 网页应用场景

    • p

      • 段落标签

    • h1-h6

      • 标题标签

    • 特点：垂直上下排列，独立成行

    常用内联标签及特点(行内标签)

    • span

      • 常用的行内标签，用户图标

    • strong

    • b

      • 加粗

    • em

    • i

      • 斜体

    • sub

      • 定义下标字

    • sup

      • 定义上标字

    • del

    • s(基本淘汰)

      • 删除线

    • 特点：默认在一行排列，超出一行会折行

    其他标签

    • br

      • 换行标签

    • hr

      • 水平分隔线

    图像标签

    • img

      自带属性：

      src 引入文件的路径

      绝对路径

      网络路径 http:// https://

      本地磁盘路径 C:/ D:/

      相对路径

      同级目录下 ./ (可以省略)

      上级目录 ../ (上上级目录 ../../)

      alt 友好提示

      title 鼠标悬停时展示

      width 图片宽度，只设置宽度时，高度会等比例缩放

      height 图片高度

    •  

    html字符实体

    css样式：

    text-align: center 设置文本对齐方式为居中

    color: red 字体颜色为红色

    font-size: 20px 设置文字大小为20像素

    格式

    style="属性名:属性值;属性名:属性值;属性名:属性值;...."

     
  • 相关阅读:
    sql 循环表中记录
    asp.net 上传XML，txt 直接读取文件内容
    两个表join 连接，去掉重复的数据
    图片横向显示
    接口测试
    find 命令
    Python 面向对象编程
    python之装饰器、生成器、内置函数、JSON
    python 之常用模块
    python 之函数
  • 原文地址：https://www.cnblogs.com/zxy37/p/14160600.html
Copyright © 2011-2022 走看看