集训笔记2-HTML

HTML

http://176.233.40.248/main.html
ZHANGHAO:XLY
PWD:123456
--------------------------------------------------
0. 基础概念

0.1. 名称/概念：超文本标记语言，Hyper Text Markup Languange，HTML

0.2. 特点：不同的含义，不同的表现形式

0.3. 表现形式：以标记的形式
普通文本 a:a
超文本 a:超链接 <a>超链接</a>

1. HTML的标记语法
1.1 封闭类型标记/双标记
语法：<标记>超链接</标记>
e.g. <a>超链接</a>
<b>加粗</b>

1.2 非封闭类型标记/单标记
语法：<标记>或者<标记/>
e.g. <img>

2. 标记的嵌套
定义：在一对标记之中，允许另一对或者一个标记的出现，外层标记称为父级标记，内层标记称为子级标记，子级标记具有父级标记的样式，书写时注意层级关系。

<标记1>
<标记2>
<标记3>
</标记2>
</标记1>

【练习】
创建一对body标记，在body标记中创建一对div标记，在div标记中创建一对a标记，在A标记中创建一个img标记

3. 标记的属性
定义：修饰标记的内容
【注意】声明属性时要注意的几个问题
3.1. 属性声明要到开始标记中
语法：<标记属性>内容</标记>
语法：<标记属性>

3.2. 属性和标记之间使用空号隔开。
语法：<标记属性>内容</标记>
语法：<标记属性>

3.3. 属性是拥有值的，属性的值和属性之间用“=”拼接，值可以使用单引号或者双引号引起来。

<a hre = "http://www.baidu.com">百度</a>(推荐)
<a hre = ‘http://www.baidu.com’>百度</a>
<a hre = http://www.baidu.com>百度</a>

3.4. 一个标记允许拥有多个属性，属性和属性之间使用空格隔开，属性排名不区分先后顺序。
<a hre = "http://www.baidu.com" target = "_blank">百度</a>

语法：<标记属性1 = 值属性2 = 值2 属性3 = 值3></标记>

【四大属性】
*id: 元素在网页中的唯一标识。
*title: 鼠标悬停在元素上时显示的文字。
*class: 定义元素类选择器时使用（css）
*style: 定义元素内联时使用（css）

4. 标记的注释语句
定义：解释说明某一段或者某一行代码，而这行代码不会随着程序执行。
java注释：
  //单行注释
  /*
   *多行注释
   */

  /**
   *文档只是
   */

THML注释语法：

【注意】
*注释是不能嵌套的
*注释不能出现在标记当中。

5. HTML文档标记语法
定义：每一次在创建网页前都要添加到代码内容当中，是一个固定格式
声明网页类型

<! doctype html>
<html>
<head>
  
  <title></title>
  
  <meta charset = "utf-8">
</head>

<body>

</body>
</html>

e.g. 我的以一张网页

<! doctype html>

<html>
<head>
  
  <title>白建鹏</title>
  
  <meta charset = "utf-8">
</head>

<body>
<a href = "http://www.baidu.com">百度</a>
<a href = "baijianpeng.com">这是我的第一张网页！</a>
<img src = "20180514192900125.png" >

</body>
</html>

创建一张网页
*【editPlus】
*file-->new-->html page
*ctrl+b

运行代码（快捷键）：
*【editPlus】
*ctrl+b

设置模板文件：
*【editPlus】
*tools-->preferences-->templates-->file name
(选择自己的模板文件路径。)

网页乱码解决方案：
*【editPlus】
*查看软件右下角编码格式，是不是utf-8，如果不是，

修改字体大小：
*【editPlus】

猜你喜欢