HTML

最新推荐文章于 2024-09-04 01:00:00 发布

Alice__97

最新推荐文章于 2024-09-04 01:00:00 发布

阅读量204

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML

本文链接：https://blog.youkuaiyun.com/Alice__97/article/details/92410977

前端专栏收录该内容

12 篇文章

订阅专栏

认识HTML

HTML标签——h1~h6,p,br,span,pre,hr

认识HTML

什么是HTML？

HTML是用来描述网页的一种语言

HTML是指超文本语言（Hyper Text Markup Language）
HTML不是编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签（markup tag）
HTML只用标记标签来描述网页

HTML标签

HTML标记标签通常被称为HTML标签（HTML tag）。

HTML标签是由尖括号包围的关键词，如<html>
HTML标签通常是成对出现的，比如<b>和</b>
标签中的第一个标签是开始标签，第二个是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML文档 = 网页

HTML文档描述网页
HTML文档包括HTML标签和纯文本
HTML文档也被称为网页

web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是对标签解释页面的内容。

<html>
<body>

<h1>这是我的第一个标题</h1>
<p>这是我的第一个段落</p>

</body>
</html>

<html>和</html>的文本是页面描述
<body>和</body>之间的文本是可见的页面内容
<h1>和</h1>之间的文本被显示为标题
<p>和</p>之间的文本被显示为段落

HTML标签——h1~h6,p,br,span,pre,hr

<h1~h6> <h1~h6/>标签：标题，一共包括六级标题，h1标题最大，h6标题最小
<br/>标签：段落换行，单独出现的标签，直接结束
<p></p>标签：段落标签，为文本自动分段
<span></span>标签：组合行内元素，以便通过CSS样式来个格式化
<pre></pre>标签：定义预格式化的文本，文本中的空格和换行会被显示
<hr/>标签：水平线
&nbsp字符：空格字符

HTML标签——超链接a

<a href = "网址">文字或图片</a>

<a href = "news.html">新闻</a> //链接到本站点其他网页

<a href = "http://www.baidu.com">百度</a> //链接到其他站点

<a href = "#">板块二</a> //虚拟超链接

HTML标签——图像标签img

1.图像格式

JPG:有损压缩，色彩丰富的图片
GIF：简单动画，背景透明
PNG：有损压缩，透明，交错，动画

2.插入图片img

<img src = "图片位置路径" alt = "w3c" />//alt属性是图片的替换文本

3.绝对路径与相对路径

C:/site/index.htm

C:/site/logo.gif

绝对路径：以根目录为基准，<img src="C:/site/logo.gif" alt="" />

相对路径：以当前文件为基准，<img src="logo.gif" alt="" />

例：C:site/web/index.html

C:site/logo.gif

相对路径： <img src="../logo.gif" alt="" />//..表示返回上一级文件夹

HTML标签——区域，列表，表格

1.区域：使用<div></div>标签，确定一个单独的区域，如页面的一个组成部分，一个栏目板块

2.列表：包括无序列表<ul></ul>和有序列表<ol></ol>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
		<li>英语</li>
		<li>数学</li>
	</ul>
	<ol>
		<li>苹果</li>
		<li>西瓜</li>
	</ol>
</body>
</html>

3.表格：table标签，tr标签（行），td标签（列），th标签（表头）

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table border="1">
		<tr>
			<th>种类</th>
			<th>价格</th>
		</tr>
		<tr>
			<td>花生</td>
			<td>3.0</td>
		</tr>
		<tr>			
			<td>黄瓜</td>
			<td>2.0</td>
		</tr>
	</table>
</body>
</html>

HTML标签——form表单标签

1.表单：是一个区域，用来采集用户信息

2.表单元素：包括文本框，按钮，单选，复选，下拉列表，文本框

3.表单<form>标签

表单元素

</form>

4.文本框，密码框input——text password

<form>
	用户名：<input type="text" name="username">//name属性为当前元素的名字
	<br>
	密码：<input type="password" name="password">
</form>

5.提交、重置按钮input——submit reset

<form>
	<input type="submit" value="提交" name="">
	<input type="reset" value="重置" name="">
</form>

6.单选框、复选框input——radio check

<form>
	性别：<!-- 单选框name属性的值要设为一致 -->
	男  <input type="radio" value="boy" name="gender" checked="boy">//checked属性为默认选项 
	女  <input type="radio" value="girl" name="gender">
	<br>
	爱好：<!-- 复选框name属性的值不可设为一致 -->
	<input type="checkbox" value="1" name="music" checked="1">音乐
	<input type="checkbox" value="2" name="ball">篮球
	<input type="checkbox" value="3" name="dance">跳舞
</form>

7.下拉列表框——select option

<select>
	<option selected="selected">生活</option><!-- selected为默认选项 -->
	<option>远方</option>
</select>

8.文本域——textarea