HTML（day01）

最新推荐文章于 2023-01-29 17:49:41 发布

September_MOTH

最新推荐文章于 2023-01-29 17:49:41 发布

阅读量84

点赞数

分类专栏： web前端入门

本文链接：https://blog.csdn.net/weixin_51341201/article/details/119514514

版权

web前端入门专栏收录该内容

38 篇文章 2 订阅

订阅专栏

第二阶段内容

HTML5 Basic（2天）

> 制作页面的标签, 搭建网站的结构
> 使用标签完成页面骨架之后, 我们搭建的网页, 是 __静态__ 页面
> 页面中的数据是访问服务器获取的, 这种页面是动态页面

Ajax 异步数据交互（3天）

> 前端页面异步的与服务器做数据交换

使用 h5 和 ajax 完成项目（2天）

> 前端: html
> 后台: js, nodejs, mysql
> 页面与后台的交互: ajax

CSS3（4+2天）

> 美化你 HTML

BootStrap 框架

> 简化 CSS3 的开发
> 响应式布局

项目（3天）

> 使用 Bootstrap 完成学子商 几个页面
> （简称） Boot

我们会遇到问题

> 1. 知识点 细 碎 多
> 知识点之间没有太多条例和关系
> 2. 单词量超级大, 有些单词还比较长
> 3. 减速 120以上
> 4. 笔记

web 基础知识

html, 专门指网页技术
HTML5, 大前端技术（网页, app, 桌面程序, 数据可视化, VR…）
网页（pc, pad, phone）app, wx 服务器数据库
html5 是 html4.01 和 xhtml1.0 的升级版
XHTML1.0 的语法更严谨 /
H5 支持两种写法

web 与 internet

> Internet 全球计算机互联网
> 俗称 互联网, 因特网...
> 浏览网页, 只是 Internet 所有服务器中的一项服务
> www 服务 world wide web 万维网, 访问网站的服务
> BBS: 论坛
> Email: 邮件
> telnet: 远程登陆
> FTP: 上传下载

Internet 上的应用程序

> 1. C/S
> c: clinet 客户端 / s: server 服务器    app
> 2. B/S
> b: browser 浏览器 / s:server 服务器
> qq 梦幻西游
> 代表作, 各类网站

> C/S 和 B/S 的区别
> 1. C/S 需要升级
> 2. B/S 不需要升级

web 运行原理

> web: 运行在 Internet 上的一种 B/S 结构的应用程序, 俗称网站
> Internet: 为 web 运行提供了网络环境
> __web 的工作原理__: 基于 **浏览器** 和 **服务器** 以及 **通信协议** 来实现的数据传输和展示
> 1. 通信协议:
>   规范了数据是如何打包和传递的
> 2. 服务器:
>   功能: 存储数据, 接收用户请求 并给出响应
>        提供了程序的运行环境, 具备安全功能
>   服务器产品:
>       TomCat (java)
>       Apache （php）
>       IIS    （.net）
>   服务器端技术
>      java php nodejs .net python
> 3. 浏览器
>   功能: 代表发送请求, 接收到响应解析页面
>        _作为 html, css, js 的解析器_
>   浏览器的产品:
>       chrome / safari / firfox / Opera / IE --> edge
>   浏览器的技术:
>     html + css + JavaScript

HTML 快速入门

什么是 HTML

> HTML: HtperText Markup Language
> 超文本标记语言
> 超文本, 有能力的普通文本就是超文本
> 每一种标签都有自己独特的功能

HTML 的特点

> 1. 以 .html 或 .htm 为后缀
> 2. 由浏览器解析执行
> 3. 用带有 <> 的标记来编写
> 4. 可以运行 js 脚本

HTML 基础语法
标记（标签、节点、元素, 对象）

  > <关键字 ></ 关键字>
  > 标记在使用时必须使用 <> 扩起来
  > 标签的分类, 两类:
  >   1. 双标记: <关键字 ></ 关键字>
  >      有开有关的一对标记, 两个标记之间的部分, 叫做 内容区, 内容区域中的部分, 就是
  >   2. 单标记（空标记）： <关键字 />  或 <关键字 >

练习: 创建 01_ex.html, 在页面中添加三对双标签 html、head、body

2. 嵌套
  > 在一对标签中（内容区域）出现其他的标记, 从而形成功能的堆叠
  > 1. 要有缩进
  ```html
    <body>
      <b>
        <a href="" >
          蜘蛛侠
        </a>
      </b>
    </body>
  ```
  > 2. 不建议写在一行内
  > 3. 要避免嵌套错误


3. 属性和值
  > 属性和值是对标签的一种修饰
  > 语法: 
  >   1. 属性必须声明在开始的标签中: < 关键字 属性="值" ></ 关键字 >
  >   2. 一个元素可以有多个属性, 多个属性间, 空格隔开
  >   3. 属性值允许加 "" 或 '' 或不加引号, 推荐加 ""
  >   4. 通用属性, 标准属性
  >      title: 鼠标悬停时显示的文本
  >      id:  定义元素在页面中的唯一的标识
  >      class: css中, 引用类选择器
  >      style: css中定义行内样式

4. 注释
  > 不被浏览器解析的代码, 一般用于编写逻辑解释
  > ```<!-- 注释内容 -->```
  > 1. 注释不能嵌套注释
  > 2. 在 <> 内部不能添加注释
  > 3. 注释在工作中的重要性

5. 学习 HTML 的技巧
  > 学习固定的标签关键字, 及功能
  > 学习属性和值, 及其功能
  > 学习嵌套关系

HTML的文档结构

html 文档的构成

> <!DOCTYPE html>
> 告诉浏览器, 请用 h5 的规则来解析运行当前文档

网页的结构

```html

  <!DOCTYPE html>
  <!-- 一个网页的开始和结束 -->
  <html>
    <head>
      <!-- 头部 -->
    </head>
    <body>
      <!-- 主体 -->
    </body>
  </html>
  <!-- 注意, 一个 .html 中, 只能存在一套 <html></html> 标签 -->
  <!-- 在 <html> 中包含页面头部信息和页面主体 -->
```

< head></ head> 是头信息的容器

> __< title> 设置网页的标题__
> < meta> 元数据, 定义网页的全局信息
>     元数据: 描述一个物体, 或者一件事的数据
> __< meta charset="utf-8">__ 设置网页中文编码方式是 utf-8
> < meta name="description" content="描述内容" >
> < meta name="keywords" content="关键词的内容" >
> _< script >< /script >_  定义或引用 js 文件
> _< style ></ style >_  定义网页的内部样式
> _< link >_ 引入外部样式

body 元素

> 定义网页的主体
> < body >< /body >
> 属性:
>   1. bgcolor: 设置背景颜色, 取值为合法的颜色值
>   2. text: 设置文本颜色, 取值为合法的颜色值

练习: 02_ex.html 中编写一个完整的 html 结构, 文本样式声明, html, head, body, title, utf-8

文本标记（***）
标题元素

  ```html
    <h1></h1>
    <h2></h2>
    ...
    <h6></h6>
    <!-- 
      在页面中以醒目的方式显示文本
      特点: 
        1. 字体大小有变化: h1 最大 -- h6 最小 
        2. 字体都是加粗显示的
        3. 独占一行
        4. 上下有垂直距离
      
      属性: align: 设置标记内部内容水平对其方式
            取值 left / center / right
    -->
  ```

2. 段落标记（paragraph）
  > < p > < /p >
  > 特点: 1. 独占一行
  >      2. 上下有垂直距离
  > 属性: align 取值 left / center / right

3. 换行标记
  > < br > 或 < br/ >

4. 水平线
  > < hr/ > 或 < hr >
  > 属性:
  >   1. size="550px" 水平线的粗细, 以 px 为单位的数字
  >   2. width="50%"  水平线的宽度, 以 px 为单位的数字和%
  >   3. align="left" 对其方式
  >   4. color="pink" 水平线的颜色

5. 预格式化
  > < pre >< pre/ >
  > 保留 html 代码中的回车和空格

6. 特殊字符
  > html 有空格折叠现象, 页面中所有的空格和回车都会被解析成一个空格
  > 空格: & nbsp ;
  > & gt;   <   less than
  > & lt;   >   great than

  > & reg; 注册  ®
  > & copy; 版权 ©
  > & yen; ￥
  > & times; 关闭的叉子

September_MOTH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（day01）

第二阶段内容HTML5 Basic（2天）> 制作页面的标签, 搭建网站的结构> 使用标签完成页面骨架之后, 我们搭建的网页, 是 __静态__ 页面> 页面中的数据是访问服务器获取的, 这种页面是动态页面 Ajax 异步数据交互（3天）> 前端页面异步的与服务器做数据交换使用 h5 和 ajax 完成项目（2天）> 前端: html> 后台: js, nodejs, mysql> 页面与后台的交互: ajax CSS3（4
复制链接

扫一扫