1.0 HTML基础之文档、列表、超链接

谁住在深海的大包络里
1,122 阅读8分钟

1.0基本语法

HTML是什么？

HTML是一种超文本标记语言

他有什么特点？

  1. HTML不需要编译，直接由浏览器执行
  2. HTML 是一个文本文件
  3. HTML文件必须使用html或者htm为文件后缀
  4. HTML大小写不敏感，HTML和html一样

他的基本结构是什么？

  • html文件
<html>
......
</html>

(告诉浏览器这是个html文件)

  • 头部信息(存放网页标题或者关键字等，标签内内容在网页中不会显示出来)
<head>
        <title>标题</title>
</head>

  • 网页内容(网页看到的所有内容都在body标签内)
<body>
        网页主题内容
<body>

来吧举个栗子

打开sublime输入

<html>

<head>
	<title>hello,new world</title>	
</head>

<body>
	<p>hello new world. i love you!</p>
</body>

</html>

save后进入文件夹找到这个文件打开后就长这样式儿：

看来新建成功了

标签规范

  • 一般标签成对出现
    但是例如<hr>标签（一条水平线）就只有单独一个，但是为了标签的规范性，我们一般在标签结尾加入一个反斜杠来结束这个标签:<hr/>
  • 开始标签比结束标签少一个‘/’

文本元素：开始标签+内容+结束标签

一些操作

更改标签属性：


例如修改<body>标签的颜色，需要将开始标签改为
<body bgcolor="red">
这是 标签属性，添加在开始标签中，一个开始标签中可以添加多个属性标签:

<标签名 属性名1="属性值" 属性名2="属性值"......>
</标签名>

给代码添加注释: <!-- 注释内容-->

1.1文档段落

声明符合需要的DOCTYPE文档类型

<!DOCTYPE>声明必须放在HTMl文档的第一行
<!DOCTYPE>声明不是HTML标签

网页编码设置

为防止出现中文乱码情况，需要对网页编码进行设置来告诉网页使用什么语言，使用什么编码形式,国内较多使用utf-8 GB2312 gbk等编码
在<head>标签中添加：
<meta http-equiv="Content-Type" contect= " text/html;charset=utf-8"/>"
utf-8 支持简体中文和繁体中文等
gb2312 支持简体中文等


文字和段落标签

标题标签：<h1> </h1> ~ <h6> </h6>(其实就是标题尺寸从大到小排列)

段落标签：<p> </p>（使用很多很多来区分不同的段落） 其中，存在对齐操作：align="值"

值 描述
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进行伸展，这样每行可以有相等的长度

例如左对齐：<p align="left"> ... </p>
如果想在网页中添加空格：输入&nbsp;

或者使用预格式标签<pre> ... </pre>即可使最终网页显示效果与编译器显示效果相同

水平线：<hr>
可以通过以下属性调节水平线效果

属性 效果
width 设置宽度,可以使用像素或者百分百
color 设置颜色
align 设置居中对齐
noshade 设置无阴影

修饰标签：
文字斜体：<i></i> <em></em>
加粗：<b></b> <strong></strong>
上标：<sup></sup>
下标：<sub></sub>
下划线：<ins></ins>
删除线：<del></del>

输入特殊字符： 替换就完事

值 显示结果 描述
&lt； < 小于号或者标记
&gt； > 大于号或者标记
&reg； ® 已注册
&copy； © 版权
&trade； ™ 商标



1.2列表标签

无序列表

<ul>
    <li>...</li>
    <li>...</li>
</ul>

<h3>条条大路都通到罗马</h3>
	<ul>
		<li>既然没有含着金汤匙出生</li>
		<li>那就为我自己放手一搏</li>
	</ul>

效果就这样：

无序列表也有多种属性类型选择（默认disc）：

值 描述
disc 圆点
square 正方形
circle 空心圆

eg：设置空心圆：<ul type ="circle">

有序列表

<ol>
    <li>...</li>
    <li>...</li>
</ol>

他同样有很多type设置选择（默认数字1,2,3）
值 描述
1 数字1,2
a 小写字母a，b
A 大写字母A,B
i 小写罗马数字
I 大写罗马数字


定义列表

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
</dl>

注意：

  • <dd>和<dt>属于同级标签，不能嵌套使用
  • <dl><dt><dd>必须组合使用

举个例子:

<dl>
	<dt>什么是社会主义</dt>
	    <dd>共同富裕</dd>
	    <dd>消灭我这种低端人口</dd>
	<dt>资本主义是怎样的</dt>
	    <dd>万恶的</dd>
</dl>

1.3图像和超链接

图像标签

语法：

<img src="" alt="" .../>


属性 值 描述
src(必须写) URL 显示图像的URl
alt 文字 图像替代文字
height 数值或百分比 高
width 数值或百分比 宽

其中，height和width属性输入百分比会根据所占“容器”（网页）的大小自动进行调整
而输入像素（50px）则不随网页大小变化而变化
不设置则为原始尺寸

URL路径：

  • 相对路径：所创建网页与图片之间的位置
    同级文件夹:直接使用图片名或者../返回上一层文件夹,下一级目录需要写出路径找到图片
  • 绝对路径：从C.D.E盘一路到最终的图片名

超链接标签

追加在一个标签后面的一种属性
语法：<a href="">内容</a>
属性：

属性 描述
href 链接地址
target 链接的目标窗口_self,_blank,_top
title 链接提示文字
name 链接命名

href:链接地址，可以是内部链接（相关的网页）或者外部链接（外部网址），如果输入“#”则为空链接，点击无效

target:控制链接窗口的位置，是新打开还是改变原有窗口

  • _self:是让当前窗口变成新窗口
  • _blank:是创建新窗口打开

title:鼠标放在超链接上几秒后出现的提示文字

name:给链接命名，用于锚功能

eg:

<img src="佟丽娅.jpg" alt="丫丫" width="50%" height="50%"><br/>
		<h3>佟丽娅</h3>
		<a href="附图测试.html">点击出奔驰</a>

效果就是这样：

点击紫色字体就会进去超链接所链接的网页：

锚功能

定义锚：

<a href= "#锚名1">目录1</a>
<a href= "#锚名2">目录2</a>
<a href= "..."name="锚名1">内容</a>
XX
XXX
<a href= "..."name="锚名2">内容</a>
XX
XXX

其中**<\a>**标签不一定有意义，也可以只是定位作用 举个例子操作一下： 
<!DOCTYPE html>
<html>
<head>
	<title>苏联百度百科 进行锚定</title>	
	<meta http-equiv="Content-Type"  contect= " text/html;charset=utf-8"/>
</head>

<body>
	<a href="#dixing">地质条件</a><br>
	<a href="#qihou">气候特点</a><br>
<a name="dixing"><h2>地质条件</h2></a>
<a >高山地形在南部的山脉。在黑海和里海之间，例如，在高加索山脉有令人印象深刻的高度，标志着欧洲和亚洲边界。其中一个山峰，厄尔布鲁士峰，是欧洲的最高点为5642米。这一山脉，延伸到西北部，如克里米亚半岛和喀尔巴阡山脉和东南部。天山和帕米尔高原，形成了一个宏伟的苏联及其南部邻国之间的天然屏障。在苏联的最高点，海拔7495米，是共产主义峰（Pik Kommunizma）在靠近阿富汗边境的帕米尔高原，巴基斯坦，和中国。帕米尔高原和Tien Shan都是世界上最高的山脉的分支，喜马拉雅。</a>
<hr color="red">

	<a name="qihou"><h2>气候特点</h2></a>
<a >气候复杂多样，最北部和北冰洋附近的岛屿属于寒带和亚寒带，大部分国土位于温带，克里米亚半岛南岸、南高加索和中亚的南部属于亚热带。年平均降水量为530毫米。冬季几乎全境降雪。
主要气候特征：冬季漫长、严寒、干燥，夏季短促、温暖，春季、秋季短，气温年较差大。大陆性气候特征强。约80%地区属温带，16%属寒带，4%属亚热带。
呼啸的北极风产生沿海的风寒最低达到−72°C，或草原雪灾。气候表现为苏联的沿海地区，倾向于温和气候。结合“西伯利亚高压”：寒冷，东部高压系统，加上潮湿，在西冷气旋系统很大程度上决定了整体的天气模式。</a>
<hr color ="blue">
/body>
</html>

效果如下：

点击超链接即可跳转至相应位置

接下来进行不同页面的锚点定义：

网页1：<a href="网页名称#锚名">...</a>

网页2：<a name="锚名">...</a>

电子邮件链接

语法： <a href="mailto:邮件地址">...</a>

下载文件操作

<a href="文件名字(记得加格式)">...</a>

以上就是第一部分HTML基础操作的学习了

avatar
文章
阅读
粉丝