HTML+CSS学习进度05
1.标签关系:
双标签关系可以分为两类：包换关系和并列关系。
包含关系：<head>
<title></title>
<head>
并列关系：<head></head>
<body></body>
2.基本结构标签：
<html></html> HTML标签 页面中最大的标签，我们称为根标签。
<head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title。
<title></title> 文档的标题 让页面拥有一个属于自己的网页标题。
<body></body> 文档的主题 元素包含文档的所有内容，页面内容基本都是放到body里面的。
3.<!DOCTYPE>
文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html> //声明位于文档中的最前面的位置，处于<html>标签之前。
这代码的意思是：当前页面采取的是HTML5版本来显示页面。
4.lang语言种类
用来定义当前文档显示的语言。
1.en定义语言为英语
2.zh-CN定义语言为中文
例如：<html lang="zh-CN">
5. <meta charset="UTF-8">
采取UTF-8来保存文字，如果不写就会乱码。 //写在<head> </head>中包含关系//
6.标题标签<h1>-<h6>
h为head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标签的文字会变得加粗，字号也会依次减小（h1-h6）。
2.一个标题独占一行。
7.段落标签
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落
标签语义：可以把HTML文档分割为若干个段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
8.换行标签
<br> or <br />
单词break的缩写，意为打断、换行。
标签语义：强制换行。
特点：
1.<br />是一个单标签。
2.<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
9.文本格式化标签
加粗文字：<strong></strong>或者<b></b>
倾斜文字：<em></em>或者<i></i>
删除线：<del></del>或者<s></s>
下划线：<ins></ins>或者<u></u>
10.<div>和<span>标签（都是用来布局的）
<div>和<span>标签是没有语义的，它们就是一个盒子，用来装内容的。
<div></div> <span></span>
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行可以多个<span>。小盒子
11.图像标签和路径
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像URL" /> ------单标签
单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
其他属性：
src-----图片路径------必须属性
alt-----文本-------替换文本。当图像不能显示的时候替换成文本
title-----文本------提示文本。鼠标放到图像上时显示的文字
width-----像素-----设置图像的宽度
height-----像素------设置图像的高度
border------像素------设置图像的边框粗细
注意：
1.图像标签可以有多个属性，必须写在标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式。即key="value"的格式，属性="属性值"。
相对路径：
同一级路径---- ----------图像文件位于HTML文件同一级 如<img src="a.jpg" />
下一级路径---- / ----------图像文件位于HTML文件下一级 如<img src="images/a.jpg" />
上一级路径---- ../ -----------图像文件位于HTML文件上一级 如<img src="../a.jpg" />
绝对路径：
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如："D:\web\img\logo.gif"或完整的网络地址："http://www.itcast.cn/images/logo.gif"。
12.超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
1.连接的语法格式
<a href="需要跳转的目标" target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写，意为锚。
两个属性的作用如下：
href------用于指定链接目标的URL地址，（必须属性）当为标签应用herf属性时，他就具有了超链接的功能。
target------用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
2.链接分类：
1.外部链接，例如<a href="http://www.baidu.com">百度</a>。
2.内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各项网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
例如：<a href="http://www.baidu.com"><img src="img.jpg" /></a>
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
①在链接文本的href属性中，设置属性值为”#名字“的形式，如<a href="#two">第二集</a>
②找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
13.注释标签
如果需要在HTML文件中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--”开头，以“-->”结束。
例如 ： <!--注释语句-->
14.特殊字符
 ；—— 空格字符 <；—— 小于字符 >；—— 大于字符
"———引号 ©——版权号；
15.有序标签
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自带序号1、2、3。
16.无序标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>
无序号，但前面带点。
17.描述标签
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
可用于图文混编的效果，在<dt></dt>中放入图片。
18.表格标签
1.<table></table>是用于定义表格的标签。
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指的是表格数据（tabledata），即数据单元格的内容。
5.<th></th>标签标识HTML表格的表头部分(table head)的缩写。———文字会居中加粗，与<th>标签不同。
6.
19.表单<form>
<form>.....</form>，一般和<table>和<div>连用。
单选按钮基本语法：
<input type = "radio" name = "sex" value = "男" checked = "checked">——>checked为默选此选项
复选按钮基本用法：
<input type="checkbox" name="hobby" value="1">Web设计
<input type="checkbox" name="hobby" value="2">Web开发
文本框：
<input type = "text" name = "username" id = "uername">
密码框：
<input type = "password" name = "password" id = "password">
下拉框：
向往的城市：
<select name="city">
<option selected = "selected">请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
多行文本框：
<textarea cols="20" rows="5">请输入</textarea>
浙公网安备 33010602011771号