HTML基础
1 什么是标记语言
文本文件(txt):只保留文字内容,不保留文本格式。
word中:即可以保存文字内容,又可以保留文字格式。
比如:在.txt文件中和在word文件中输入同样的内容,设置同样的格式,全部发送到另一台计算机上时,出现了.txt文件只有文字内容没有格式,而word保留了内容和格式。
Word文档就是标记语言的一种,而现在要学习的HTML(HyperTextMarkup Language)也是一种标记语言,叫做超文本标记语言。
超文本标记语言:不光可以保存文字信息,还可以保存音频、视频等内容。
在我们浏览网页时,其实是将储存在服务器上的HTML文件下载到本地,在通过浏览器进行解析,从而呈现了网页内容。
2 HTML的基本结构
<html >
<head>
<meta charset="UTF-8">//设置字符集
<title>Title</title>//设置标题
</head>
<body>
1803班第一次HTML课程
</body>
</html>
HTML的基本结构包括三大部分:<html>标签:是整个目录的跟节点,包括了两个字节点。
<head>标签:主要设置一些写代码时需要做的设置工作,比如字符集、标题。
<body>标签:文档的主体部分,页面中要呈现的内容
3 HTML的基础标签
3.1标题标签
常用的标题有<h1>-------<h6>;用于显示页面的标题,包含了标题的格式。消息内容。
3.2 段落标签
<body>
<h3>静夜思</h3>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
3.3 链接标签
<a>标签,作用就是页面跳转,包括页内跳转和页间跳转。
href属性:链接的目标地址。
target属性:控制页面跳转方式其取值有四个:
_blank;在新的页面打开。
_self;在当前页面打开(默认的打开方式)。
_top;
_parent;
<body>
<a href="https://www.baidu.com/"target="_blank">跳转到百度</a>
</body>
2.页内跳转
要给“目的地”设置一个id,在<a>标签中的href属性里面使用“#....(id名字)”实现页内跳转。
Id属性具用唯一性,是页面元素中的唯一标识。id名不能重复。
3.4 图片标签
<img>图片标签:在网页中插入图片
<body>
<img src="../C203_01_04链接标签/下载%20(1).jpg" alt="">
<img src="https://tse3-mm.cn.bing.net/th?id=OIP.TOVpDQpFEQhqOGw3CbL3CwHaEK&w=300&h=300&p=0&o=5&pid=1.7"alt="">
</body>
图片可以从本地载入,也可以从网页中载入,本地载入时要找到图片的地址,在网页载入时要找到图片的网络地址。
路径:
相对路径:../:上一级目录,/:下一级目录,.:同级目录,这个“.”可以省略
绝对路径:
3.5 列表
列表在word中:
无序列表:
有序列表:
有序列表
无序列表在html中:
<ul>标签定义一个无序列表
<li>标签定义一个列表项
type属性:指定了无序列表的符号,取值有:
disc:实心圆(默认符号)
circle:空心圆
square:实心正方形
<body>
<ul>
<li type="disc">牛奶</li>
<li>面包</li>
<li>油条</li>
<li>鸡蛋</li>
<li>豆浆</li>
</ul>
</body>
结果:
有序列表在html中:
<ol>标签定义一个有序列表
type属性:制定了列表符号的种类包括:
1、2、3、4、5……
a、b、c、d、e……
还有一些其他的种类。
start属性:指定列表开始的位置,也就是从第几个开始,而不是从第几开始。
<body>
<ol type="a" start="2">
<li>牛奶</li>
<li>面包</li>
<li>油条</li>
<li>鸡蛋</li>
<li>豆浆</li>
</ol>
</body>
结果:
自定义列表在html中:
<dl>标签定义一个自定义列表
<dt>标签列表的标题
<dd>标签列表的描述
<body>
<dl>
<h3>中国各省份</h3>
<dt>河南</dt>
<dd>古都洛阳,省会郑州,我的老家周口</dd>
<dt>浙江</dt>
<dd>对浙江的描述</dd>
</dl>
</body>
4表单
4.1 表单
什么是表单?表单就是收集填写完信息后提交到后台服务器。
<form>标签定义一个表单
get提交和post提交
定义一个密码输入框:
<input type="password" name="password"size="12">
Label的作用:可以对其单独进行样式设置,同for属性可以和某一个input标签进行关联;
<labelfor="user">账号:</label>
单选框:
Checked默认选中
<input type="radio" name="role" value="1"checked>
多选框:
<input type="checkbox" value="1">音乐
普通按钮:
<button></button>
文件选择框:
<input type="file">选择文件
下拉列表:
<body>
<select name=”car”>
<option>奥迪</option>
<option>奥迪</option>
<option>奥迪</option>
<option>奥迪</option>
<option>奥迪</option>
<option>奥迪</option>
<option>奥迪</option>
</select>
</body>
文本框:
<textareaname="info"rows="35"cols="7">
</textarea>