HTML学习笔记 -- day01 p、h、a、img标签简介_a标签属于文本标签吗-优快云博客

本文链接：https://blog.youkuaiyun.com/wingzhezhe/article/details/76531974

一、HTML骨架

1、标准骨架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2、字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

中文能用的字符集有：

UTF-8：字比较全

GBK：只有汉字

注意：我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）

二、h 标签和 p 标签

1、h 系列

<h1></h1> 一级标题

<h2></h2> 二级标题

……

<h6></h6> 六级标题

2、p 标签

HTML标签是分等级的，HTML将所有的标签分为两种：容器级，文本级。

容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

p标签是一个文本级标签。p 里面只能放文字、图片、表单元素。其他的一律不能放。

三、图片

1、HTML插入的图片类型

页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。

不能往网页中插入的图片格式是：psd、ai

2、语法

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上

插入方法：

        <img src="baby.jpg"  />

img 是英语image“图片”的简写

src 是英语source“资源”的简写，千万不要写成scr。

src 是img标签的属性，baby.jpg 是这个属性的值。

这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。

3、alt 属性

	<img src="baby.jpg" alt="巴黎结婚照" />

alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。

4、相对路径

（1）、绝对路径

	<img src="images/baby.jpg" alt="巴黎结婚照" />

（2）、相对路径

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

注意：../要么不写，要么就写在开头。

四、超链接

1、基本语法

	<a href="1.html">结婚照</a>

a 是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。

a 标签是一个文本级的标签。

href 是英语hypertext reference超文本地址的缩写。

2、title：悬停文本

3、target：是否在新窗口中打开

	<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>

blank就是“空白”的意思，就表示新建一个空白窗口。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。

4、完整的超链接

	<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

5、页面中的锚点

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

6、练习：制作可以点击的图片

<a href="1.html" title="查看我的旅游图片">
        <img src="images/1.png" alt="无此图片" />
</a>

五、列表

1、无序列表：ul

用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul 就是英语unordered list，“无序列表”的意思。

li 就是英语list item ， “列表项”的意思。

注意：

li 不能单独存在，必须包裹在ul里面；反过来说，ul 的“儿子”不能是别的东西，只能有 li。

浏览器会默认的给无序列表小圆点的“先导符号”但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

ul的儿子，只能是 li。但是 li 是一个容器级标签，li 里面什么都能放，如图片，段落，a 标签，甚至是 ul 都可以放。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
			<li>铁岭</li>
		</ul>

 </body>
</html>

2、有序列表：ol

ol 里面只能有 li，li 必须被 ol 包裹。li 是容器级。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
		<ol>
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
			<li>铁岭</li>
		</ol>
 </body>
</html>

3、定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl 表示definition list 定义列表

dt 表示definition title 定义标题

dd 表示definition description 定义表述词儿

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
		<dl>
			<dt>北京</dt>
			<dd>国家首都，政治文化中心</dd>
			<dt>上海</dt>
			<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
			<dt>广州</dt>
			<dd>中国南大门，有珠江、小蛮腰</dd>
		</dl>

 </body>
</html>

注意：

定义列表用法非常灵活，可以一个dt配很多dd：

还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。

dt、dd都是容器级标签，想放什么都可以。

六、div和span

1、div

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

2、span

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

span里面只能放置文字、图片、表单元素。 span里面不能放 p、h、ul、dl、ol、div。

3、div和span区别

span里面是放置小元素的，div里面放置大东西的

七、表单

1、什么是表单

表单就是收集用户信息的，就是让用户填写的、选择的。

		<div>
			<h3>欢迎注册本网站</h3>
			<form>
				所有的表单内容，都要写在form标签里面
			</form>
		</div>

form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

2、文本框

	<input type="text" />

input 表示“输入”，指的是这是一个“输入小部件”，

type 表示“类型”，

text 表示“文本”，指的是类型是一个文本框的输入小部件。

注意：input 是一个自封闭标签，自此，我们学习的自封闭标签有：

	<meta name=”Keywords” content=”” />
	<img src=”” alt=”” />
	<input type=”text” />

3、密码框

	<input type="password" />

input标签很神奇，又是文本框，又是密码框。

到底是啥？看type属性的值是什么，来决定。

如果type=”text” 文本框

如果type=”password” 密码框

4、单选按钮

radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮

	<input type="radio" name="xingbie" /> 男
	<input type="radio" name="xingbie" /> 女

注意：单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

默认被选择，就应该书写checked=”checked”

5、复选框

也是input标签，type是checkbox。

<p>
	请选择你的爱好：
	<input type="checkbox" name="aihao"/> 睡觉
	<input type="checkbox" name="aihao"/> 吃饭
	<input type="checkbox" name="aihao"/> 足球
	<input type="checkbox" name="aihao"/> 篮球
	<input type="checkbox" name="aihao"/> 乒乓球
	<input type="checkbox" name="aihao"/> 打豆豆
</p>

注意：复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）。

6、下拉列表

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

	<select>
		<option>北京</option>
		<option>河北</option>
		<option>河南</option>
		<option>山东</option>
		<option>山西</option>
		<option>湖北</option>
		<option>安徽</option>
	</select>

7、文本域

text就是“文本”，area就是“区域”。

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。

值就是一个数，表示多少行，多少列。

	<textarea cols="30" rows="10"></textarea>

8、三种按钮

按钮也是input标签，一共有三种按钮：

（1）、普通按钮

	<input type="button" value="我是一个普通按钮" />

（2）、提交按钮

	<input type="submit" value="提交" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

（3）、重置按钮

	<input type="reset" />

reset就是“复位”的意思。

9、label标签

	<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
	<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。