第三天学习

1.浏览器内核:浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。

2.web标准:结构,表现,行为三个方面。由W3C和其他标准化组织制定的标准集合。
以下三个标准:
{
结构标准:结构用于对网页元素进行整理和分类,主要包括XML和XHTML两个部分。
样式标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为标准:行为是指网页模型的定义及交互的编写,主要包括DOM和ECMAScript两个部分 js
}```

理想状态我们的源码: .HTML .css .js

总结WEB标准:

结构标准: 决定你是否有个好天然身体

样式标准: 决定你是否打扮的美丽外观

行为标准: 决定你是否有吸引人的行为

3.html骨架格式:

html标签 是所有标签的根节点
head标签 用于存放title meta base style script link
title标签 展示页面标题
body标签 页面的主题部分,用于存放所有标签

HTML5的文档类型兼容很好(向下兼容的原则)

4.字符集:

**不写出现乱码问题**

gb2312 简体中文 六千多个汉字

BIG5 繁体中文

GBK(扩展) 兼容GB2312,同支持繁体字

UTF-8 包含所有语言,全世界用的字符

5.标题标签:h1,h2,h3,h4,h5,h6。
段落标签:p
水平线标签:hr(隔开段落)
换行标签:br
div span标签(重点):span是横向区块,div是纵向区块
文本格式化标签:b(不建议用),strong(粗体),删除下划线:text-decoration: none,斜体:em,i
图像标签:img
连接标签:a(比如a href="#")

6、 锚点定位 :通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
1.使用“a href=”#id名>“链接文本"创建链接文本。
2.使用相应的id名标注跳转目标的位置。

7、路径分为相对路径和绝对路径:
1、相对路径:
当图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src=“logo.gif” />。
当图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src=“img/img01/logo.gif” />。
当图像文件位于HTML文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src="…/logo.gif" />
2、绝对路径:完整网络地址。

8、列表:
无序列表 ul (重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。

脚下留心:

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol (了解)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

自定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

9、创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

注意:

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素


## 表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:

:用于定义表格的头部。

必须位于

标签中,一般包含网页的logo和导航等头部信息。

:用于定义表格的主体。

位于

标签中,一般包含网页中除头部和底部之外的其他内容。






<img src="media/thead.png" />

## 表格标题

**表格的标题: caption**

**定义和用法**

caption 元素定义表格标题。

```html
<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

​ 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

​ 公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

总结表格

  1. 表格提供了HTML 中定义表格式数据的方法。

  2. 表格中由行中的单元格组成。

  3. 表格中没有列元素,列的个数取决于行的单元格个数。

  4. 表格不要纠结于外观,那是CSS 的作用。

    表格的学习要求: 能手写表格结构,并且能合并单元格。

表单标签(掌握)

现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图

目的是为了收集用户信息。

在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:

​ 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

​ 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性,其常用属性如下表所示。

label标签(理解)

label 标签为 input 元素定义标注(标签)。

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性:

  1. Action
    在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method
    用于设置表单数据的提交方式,其取值为get或post。
  3. name
    用于指定表单的名称,以区分同一个页面中的多个表单。

注意: 每个表单都应该有自己表单域。

input type属性值:
email
tel
url
number
search
range:自由拖动滑块。
time
date
datetime
month
week
required:必须填,内容不能为空。
multiple:多文件上传。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值