day1 前端html(内容)(2022-02-21)

前端方向-软件界面

  • 前端的核心意义
  1. 通过界面展示数据
  2. 通过界面获得数据
  • 前端开发核心技术
  1. html 超文本标记语言
  2. css 层叠样式表语言
  3. Javascript 动态脚本语言
  • 学习过程使用软件 HBuilder X

html基础语法

新建后第一行<!DOCTYPE html>代表html版本5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>前端开发</title>
    </head>
    <body>
        html 
        <big>html</big>
        <small>html</small>
        <strong>html</strong>
        <em>倾斜html</em><!-- 来个注释 -->
        <h1>大号标题html</h1> 
        <!-- hn标题标记 内容变大加粗 独占一行 -->
        <h2>html</h2>
        <h3>html</h3>
        <h6>小号标题html</h6>
        <hr color="blue" >
        <!-- hr水平线标记 -->
        <!-- "blue"标记属性 -->
        <a href="https://www.baidu.com">去百度</a>
        <!-- a标记 超链接标记 可以完成界面跳转 必须设定href属性 跳转地址 -->
        <hr >
        <!-- img图片标记 必须设定src属性 图片地址 width宽度 height高度 -->
        <img width="400px" height="300px" src="https://t7.baidu.com/it/u=1813417221,3120900974&fm=193&f=GIF" >
        <!-- 直接复制图片地址 -->
        <img width="400px" height="300px" src="IMG_20180718_110412.jpg" >
        <!-- 本地图片复制进工程,img src直接选 -->
    </body>
</html>

html语法核心是标记 被一对尖括号括起来的一个英文单词称为标记(标记一般分为起始标记和结束标记 结束标记名字前加“/”)
通过起始和结束划分出一个范围
标记之间会有父子关系和兄弟关系(代码中最好使用tab键体现父子关系)
html代码是由标记和文本内容构成
前端的代码需要通过浏览器运行

运行时标记是不显示的,控制中间内容展示(快捷键ctrl+/ 注释)

  • 标记显示有两种情况
  1. 独占一行显示 如h1 h2..
  2. 共处一行显示
  • 标记编写情况
  1. 成对编写有起始标记有结束标记 中间必须要有内容 可以是子标记或者文字内容
  2. 单独编写 只有起始标记 不需要中间内容 本身就是一个显示内容 如hr水平线标记
  • 标记属性
  1. 编写在起始标记中
  2. 属性名="属性值"
  3. 属性代表标记的某一特征
  4. 一个标记可以根据需要设置多个属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,274评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,410评论 0 7
  • 前言 浏览器基础是前端知识网中的一个小分支,也是前端开发人员必须掌握的基础知识点。他贯穿着前端的整个网络体系,项目...
    木羽zwwill阅读 5,040评论 0 4
  • 框架 面向对象: 面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活...
    JK酱阅读 4,612评论 0 0
  • 基础强化 聊一聊前端存储。(1)老朋友cookie(2)短暂的sessionStorage(3)简易强大的loca...
    蓝海00阅读 5,737评论 0 34

友情链接更多精彩内容