HTML (基本01)

发表于 分类于 阅读次数：

一.HTML (基本01)

准备工作

1.常见的几种文件类型：

*.html *.css *.js *.php *.sql

2.wamp存放位置：~/wamp/www/

3.运行：打开wamp

​ 打开浏览器

​ 地址栏输入localhost

1.HTML简介

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>   <!--声明-->
<html lang="en">   <!--语言-->
<head>
	<meta charset="UTF-8">  <!--编码-->
	<title>标题</title>
</head>
<body>
	正文内容
</body>
</html>

​ 以上为基本的一段html代码，包含版本声明，编码，标题，其中全局架构标签为html，head，body。body标签内部的才是文字，图片，音视频等内容需要占用的位置。

编码：

计算机早期, 世界只有ASCII编码, 只有128个, 不认识汉语, 韩语, 日语
新一代的编码 Unicode编码, 支持世界上绝大多数的语言, 数字, 字母, 标点, 汉字等都占4个字节
升级版 UTF-8 编码 (万国码), 数字,字母,标点占1B, 汉字占3B

2.基本语法

①.全局架构标签

  • html
  • head
  • body

②.注释

注释是对代码的描述，不会显示在页面上，但可以增加代码的可读性

格式：

注意：不能嵌套使用

③.标签格式

网页全部是由标签组成的，标签分为两种：

  • 单标签：<开始标签/> 如:<br/>,<hr/>,<img/>,<meta/>
  • 双标签：<开始标签>正文内容<结束标签/> 如： <p> </p>

④.标签属性

格式：<开始标签 属性名=“属性值” 属性名=“属性值” ...>

标签属性写在标签内部，每对属性之间至少保留一个空格

标签名和属性名不区分大小写

3.浏览器特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浏览器特性</title>
</head>
<body>
    <h1>浏览器特性</h1>
    <hr>
    
	亚洲有四大邪术:
		日本的化妆术
		韩国的整容术
		泰国的变性术
		中国的PS术
</body>
</html>

虽然在代码中进行了排版，但实际效果是：

无标题

注意：浏览器中，任何多的空格和回车，要么不解析，要么解析为一个空格，利用这个特性，可以在代码中做好排版和注释。

一个职业程序员，应该有良好的注释习惯及排版审美

4.文本格式标签

①.标题标签

<h1>标题</h1>

从<h1>到<h6>,标题格式由高层级向低层级转化。一般常用的为h1到h4

其中h1标签在一个页面中最好只用一次，因为h1可以用于提高搜索排名，而使用两次及以上，则会被搜索引擎拉入黑名单。

②.段落标签

<p>正文</p>

在p标签中的文字，为一个段落。不同段间上下行间间距较大，自动换行

③.样式标签

  • <b>bold</b> 加粗
  • <i>italic</i> 倾斜
  • <u>underline</u> 下划线
  • <del>delete</del> 删除线

只负责表面样式，不具备实际意义。

④.语义化标签

  • <strong> strong</strong> 强调
  • <em>emphasize</em> 加强

不仅负责表面样式，还具备方便浏览器解析的特性

⑤.上、下标

  • x<sup>2</sup> 上标 x2
  • CO<sub>2</sub> 下标 CO2

⑥.原样输出

  • <pre> </pre> 保持代码样式格式输出

5.列表标签

场景: 一排排 or 一列列长的差不多, 样式相似, 都可以用列表

  • 有序列表ol（ordered list）
1
2
3
4
5
6
7
《回乡偶书》
	<ol>
		<li>瘦小离家老大回</li>
		<li>乡音未改肉成堆</li>
		<li>儿童相见不相识</li>
		<li>请问胖子你是谁</li>
	</ol>
  • 无序列表ul（UNordered list）
1
2
3
4
5
6
7
《静夜思》
	<ul>
		<li>窗前明月光</li>
		<li>地上鞋两双</li>
		<li>一对狗男女</li>
		<li>其中就有你</li>
	</ul>
  • 定义列表dl（defined list）
1
2
3
4
5
6
<dl>
		<dt>帮助中心</dt>
		<dd>账户管理</dd>
		<dd>购物指南</dd>
		<dd>订单操作</dd>
	</dl>

在实际开发中, ul 使用频率比较 ol 高, 原因是ul解析不用排序，速度比ol快一点

6.实体符号

基本格式： &符号代码；
空格 &nbsp；
小于 &lt； <
大于 &gt； >
版权 &copy； ©
人民币 &yen； ¥

其余实体符号具体参考实体符号速查表

符号代码 释义 表现
&hearts; 爱心 ♥
&euro; 欧元 €
&frac25; 分数 ⅖
&uarr; 向上箭头 ↑
&larr; 向左箭头 ←

7.超链接

  • 标签名：a
  • 属性：
    • href 链接地址
    • target 在制定窗口打开链接
      • _self 在本窗口打开链接，默认
      • _blank 在新的空白页打开链接
      • _top 在顶级窗口打开链接
      • 自定义name窗口

注意点：链接地址为协议+域名，若不写地址，则默认跳转到当前页面

  1. 任意一个地址只会对应一个文件

  2. 在任意目录下，命名为 index.html 或者 index.php 的文件，访问该目录时会自动执行index文件。

  3. URL：网址

    在完整地址中，第一个？是文件与参数的分隔符

  4. 参数

    格式：参数名1=”参数值1” 参数名1=”参数值1”

    多个参数之间有&隔开

  5. 锚点

    格式： #锚点名

    必须在锚点名前加#号

1
<a href="http://www.xxx.com:80/image/av/a.jpg?name=yuhan&age=18#xxoo"> 瞎编的完整地址 </a>

8.锚点

作用：跳转至某一页面或者某一节点

步骤：

​ 1.确定锚点：HTML4 name=”锚点名”

​ HTML5 id=”锚点名”

​ 2.跳转到锚点：

​ <a href="url+#锚点名">点击跳转</a>

注意点：链接地址为协议+域名，若不写地址，则默认跳转到当前页面

baidu