码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-12-24 12:02:09      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:java   类型   enter   对齐   内联   comm   ice   ESS   前端   

前端的概述

  • 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="属性名:属性值;属性名:属性值;属性名:属性值;...."

 

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

标签:java   类型   enter   对齐   内联   comm   ice   ESS   前端   

原文地址:https://www.cnblogs.com/zxy37/p/14160600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!