校易班技术部第一次授课

First Post:

Last Update:

校易班技术部第一次授课

html文档结构与基本语法

html5基本结构如下

1
2
3
4
5
6
7
8
<html>
<head>
    <!--头部信息，如<title>标签定义的网页标题-->
</head>
<body>
    <!--主体信息，包含网页显示的内容-->
</body>
</html>

头部

页面标题及字符集的收集

（1）title标签

<title>个人网页</title>

双标签，开始和结束标签之间的内容就是要设置的页面标题

注意：

一个网页只能有一个标题

标题名称的长度不超过64个字符数

标题标记对之间不允许有其它的标签存在

（2）charset属性

通过meta标签的charset属性设置页面的字符编码格式。

如：ISO-8859-1，utf-8：Unicode ，gb2312

元信息的设置

meta标签的作用

  • 对页面：

<meta http-equiv="名称" content="值"/>

  • 对搜索引擎：

<meta name="名称" content="值"/>

link标签

<link href="" rel="" type="" />

  • href设置外部文档的地址
  • rel设置当前文档与引用的外部文档的关系
  • type设置外部文档的类型。

作用：

  • 指定引用外部文档的地址
  • 指定当前文档与引用的外部文档的关系
  • 说明引用外部文档的类型

主体

元素

功能元素

常见的有：<div></div> <p></p> <video></video> <span></span> <img />

结构元素


内容元素

修饰元素

表单元素

1
双标签以</xxx>结束，单标签（如<br/>）需要以<xxx/>结束

属性

标签有其自己的属性，大部分元素拥有核心元素class id style，不同元素不同，可见->手册查看相关特性及用法

核心属性
  • class：定义类名
  • id：定义元素的唯一标识
  • style：定义元素的样式
内容属性
  • alt：定义元素的替代文本
  • title：定义元素的提示文本

<img src=" " alt="替代文字" title="提示文本"/>

链接属性
  • href：规定链接的目标
  • target：定义被链接的文档在何处显示
  • name：规定锚（anchor）的名称

<a href="https://blog.zepo.re/" target="_blank">Hello world!</a>

<a href="#tips">跳转指向name为tip的位置</a>

表单属性
  • require：提交时要求要有内容
  • placeholder：对用户的输入进行提示
  • multiple：允许多文件上传
  • ···

编辑器快捷键

像HBuilder这种文本编辑器一般会内置有html模板，html + ENTER可以快速创建html文件

  • 设置宽高 w500+h300 + TAB

  • 标签名称 + TAB

作业

查看手册，完成简单作业

  • 对基本元素及其属性进行熟悉
  • 写一个三行两列的表格
  • 尝试detail+summary的方式做一个缩略文本
  • 将练习整合到一个页面打包发送到[email protected]

下次课：css基础（会相对复杂），可先行预习

≡