集训笔记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标记

<body>
 <div>
  <a>
   <img src = "bjp.gif">
  </a>
 </div>
</body>

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注释语法:
  <!--注释的内容-->
  <!--下面是一个a标记,用于连接到百度服务器-->


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



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

<! doctype html>
<html>
 <head>
  <!--声明网页的标题-->
  <title></title>
  <!--声明网页的编码格式-->
  <meta charset = "utf-8">
 </head>
 <!--声明网页的主体-->
 <body>
 
 </body>
</html>

e.g. 我的以一张网页
<!--s声明网页格式-->
<! doctype html>
<!--声明一对thml标签-->
<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】

阅读更多
个人分类: Python基础
上一篇集训笔记1-20180515
下一篇集训笔记0-python课程大纲(0514)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭