HTML01_HTML入门

1. 具体内容

1.1 课程要求以及本门课的作用

html:做页面的。——做好之后其实静态的。

2. HTML入门简介

2.2.1 什么是HTML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

学习各种标签的使用

2.2.2 为什么要使用html

2.2.3 编写html开发工具

开发工具:在哪个软件中书写代码。

文本编辑器。 ——记事本 editplus

运行工具:在哪个软件中运行代码:将代码运行出效果图。

浏览器来运行html

Hbuilder:集成开发工具:

编写源代码+运行出效果图+联想提示

2.3 基本结构

html标签:这是最大的一个html标签,代表这个一个html解析

head:头,里边会有大标题(网页的大标题,浏览器显示的标题)

编码格式:以何种语言格式来解析这个文件。保存文件的时候也有编码格式。一边情况下,文件的编码格式需要和html的解析格式保持一致。

中文:utf-8 gbk(ANSI) iso(英文的不能存中文)

body:体

所有浏览器中显示的内容都在这里写

<html>
	<head>
		<title>大标题</title>
		<meta charset="utf-8"/>
	</head>

	<body>
			主题内容
	</body>
</html>

2.4 标签格式

<标签名> 标签体 </标签名>

2.5 基本标签

2.5.1 标题标签

2.5.2 段落标签

<body>
		<!--注释:写给程序员看的。运行没有任何效果,是代码的解释-->
		<!--标题标签:h1-h6-->
		<h1>h1标题标签</h1>
		<h2>h1标题标签</h2>
		<h3>h1标题标签</h3>
		<h4>h1标题标签</h4>
		<h5>h1标题标签</h5>
		<h6>h1标题标签</h6> 
		<!--段落标签:p-->
		<!--换行标签:br-->
		<p>
			内容内容内容内容内容内容内容内容内容内容内容内容内容内容
			<br/>内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		</p>
		<p>
			内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		</p>

	</body>

2.5.3 文本标签

<!--文本标签:不会换行-->
		<b>加粗标签</b>
		<i>斜体</i>
		<sub>下标</sub>
		<sup>上标</sup>
		<font size="7" color="red">文字</font>
		<span>dddd</span>

2.5.4 img图片标签

<!--图片标签:直接找必须在同一级目录-->
		<img src="red.jpg"/>

路径:

但凡是html 图片 html 音频,两个文件必须在同级目录才能操作。如果不在同一级。

——通过目录的形式让他们处在一级,才可以通过文件名进行访问。

物理上在不同的文件夹,但是路径是他们放到一起的一种方式。

出文件夹:…/

进入文件夹:文件夹名/

<!--图片标签:直接找必须在同一级目录-->
		<!--路径如何让两个文件处在同级目录:-->
		<!--相对路径-->
		<img src="../../img/第一次/red.jpg"/>
		<!--绝对路径,部分浏览器不支持-->
		<img src="D:\QY141\qy141\img\第一次\red.jpg"/>

图片格式

BMP 是(Windows 位图) Windows 位图,可以用任何颜色深度(从黑白到 24 位颜色)存储单个光栅图像。

JPG是Joint Photographic Experts Group(联合图像专家组)的缩写,文件的扩展名为.jpg或.jpeg, 图像品质高,下载速度快

GIF(Graphics Interchange Format)的原义是"图像互换格式",是CompuServe公司在 1987年开发的图像文件格式。GIF格式的特点是压缩比高,磁盘空间占用较少, 可制作2D动画文件

PNG格式:PNG(Portable Network Graphics)的原名称为"可移植性网络图像",是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件

2.5.5 超链接以及锚点

a标签+href属性是做超链接的:

<a href="https://www.baidu.com">百度</a>
<!--相对路径-->
<a href="../../html/第一次课/class01.html">class01</a>
<a href="class01.html">class01</a>

– 锚点:页面过长,找东西不方便,可以做一套指南。可以在本页面跳动而不舒心当前页
在这里插入图片描述

第一步:想去的位置起名字:

<h1><a name="mingzi">今天天气不错4</a></h1>

第二部:连接到指定位置:

<a href="#mingzi">我想去h4</a>
<a href="class02.html#mingzi">class02</a>

2.5.6 无序列表有序列表

 <!--li不能独立使用 ol ul也不行:
			ul 里边嵌套li,也只能嵌套li.
			
			
		--> 
		<ol> 
			<li><a>ddd</a>
				内容内容内容内容
				<p>dddd</p>
				 
			</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
		</ol>
		
		<ul>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
			<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
		</ul>

2.6 注释和特殊字符

在这里插入图片描述

2.7 表格

在这里插入图片描述
在这里插入图片描述
:表格的内容都需要写到单元格内
必须先行起,一行起5个单元格,代表是5列

<table>:表格的基本标签
<tr>:一行
<td>:一个单个元(一列)
<body>
		<table border="1" width="100%">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>zz</td>
				<td>11</td>
				<td></td>
			</tr>
			<tr>
				<td>ls</td>
				<td>11</td>
				<td></td>
			</tr>
		</table>
	</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值