Study Day02-9.9

最新推荐文章于 2024-08-24 23:35:04 发布

咸咸的小鱼干

最新推荐文章于 2024-08-24 23:35:04 发布

阅读量133

点赞数

文章标签：学习日常

本文链接：https://blog.csdn.net/weixin_43117503/article/details/100664335

版权

Study Day02-9.9

HTML 第一天
- 上午的学习
- 下午的练习

HTML 第一天

认识WEB > 浏览器 > 浏览器内核 > WEB标准 > HTML认识 > 开发工具 > 文档类型 >
字符集 > 常用标签 > 路径

上午的学习

认识常用浏览器
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
浏览器的内核
1.Trident(IE内核)
2.Gecko(firefox)
3.webkit(Safari)
4.Chromium/Bink(chrome)
5.Presto(Opera)
WEB标准
- WEB标准的好处
  1、让Web的发展前景更广阔
  2、内容能被更广泛的设备访问
  3、更容易被搜寻引擎搜索
  4、降低网站流量费用
  5、使网站更易于维护
  6、提高页面浏览速度
- WEB标准的构成
  主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
  1、结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
  2、样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
  3、行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分
HTML 初识
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

HTML标签分类
1、双标签

<strong> 标签名 </strong>

2、单标签

<br />   <hr />

HTML标签关系
1、嵌套关系

<head>  <title> </title>  </head>

2、并列关系

<head></head>
<body></body>

开发工具
DW、Sublime、WebStore、HBuilder、Visual Stdio Code 等等
文档类型
```
<!DOCTYPE html>
```
字符集
```
<meta charset="UTF-8">
```
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符
HTML标签的语义化
白话：所谓标签语义化，就是指标签的含义。
为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

HTML标签

<hn>   标题文本   </hn>
<p>  文本内容  </p>
<div> 这是头部 </div>    <span>今日价格</span>

标签的属性
```
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
```
在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key=“value” 的格式

提倡：尽量不使用样式属性。
图像标签img
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
```
<img src="图像URL" />
```
链接标签
```
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
```
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位
1.使用“a href=”#id名>“链接文本"创建链接文本。
2.使用相应的id名标注跳转目标的位置。
base标签
base 可以设置整体链接的打开状态
特殊字符标签
注释标签
```
   
```
路径
路径可以分为：相对路径和绝对路径
- 相对路径
1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。
- 绝对路径
  “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

列表标签

无序列表

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

有序列表

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

定义列表

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

下午的练习

实现简单排版文字页面
实现类似百度百科界面(任何任务都可)，要求是要有锚点
实现简单电商页面（布局无序列表）

咸咸的小鱼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Study Day02-9.9

Study Day02-9.9HTML 第一天上午的学习下午的练习HTML 第一天认识WEB > 浏览器 > 浏览器内核 > WEB标准 > HTML认识 > 开发工具 > 文档类型 >字符集 > 常用标签 > 路径上午的学习认识常用浏览器浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、...
复制链接

扫一扫