一、元数据
标签有很多，需要慢慢发掘。
<meta charset="utf-8">
指定文档字符的编码。utf-8是一个通用的字符集。也可以修改为其它的字符编码。
- 添加作者和描述
<meta name="author" content="离歌">
许多<meta>元素包含了name和content特性:
-
name：指定了meta元素的类型，说明该元素包含了什么类型的信息。 -
content：指定了实际元数据内容。 -
定义页面描述
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务" />
- MDN还这样描述一段话:
- 设置页面的定时跳转
<meta http-equiv="Refresh" content="2" url="http://www.baidu.com/">
2秒钟后跳转到百度页面。
-
content:间隔时间(秒)， -
Refresh：表示页面刷新。 -
自定义站点图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
二、HTML标签
-
段落标签
<p>天天向上</p>
<p>好好学习</p>
HTML不区分大小写，我们一般使用小写，看得更直观一些。
大部分的文本结构都是由标题和段落组成。
- 标题标签
最好每个页面使用一次h1-顶级标题。
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
列表Lists
- 无序列表
<ul>的每一项是<li>
<ul type="disc">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
type属性值：
-
disc:默认值，黑色圆点 -
circle：空心圆 -
square:正方形符号
li不能单独存在,必须包裹在ul里面。
有序列表：
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ol>
网页上经常会用有序列表排列文字。
定义列表
定义列表有两部分组成:定义条件和定义描述.。
dt、dd只能在dl里面。
<dl>
<dt>今天</dt>
<dd>星期一</dd>
<dd>星期二</dd>
<dd>星期三</dd>
<dt>明天</dt>
<dd>星期四</dd>
<dd>星期五</dd>
<dd>星期六</dd>
</dl>
ul标签的应用场景
- 导航条一般是无序列表，或者a链接。
超链接的属性 -
href：目标URL。 -
title:悬停文本。 -
name：主要用于设置一个锚点的名称。 -
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）。
_blank：在新的窗口中打开。
_parent：在父窗口中显示。
_top：在顶级。
使用title属性添加支持信息
<p> 请点击
<a href="#" title="为了您的信息安全,请不要随意输入账号密码!">登录</a>
</p>
块级链接
将图片转换为链接,把图片放到<a></a>标签中间。
<a href="http://www.baidu.com">
<img src=" " alt="武当山">
</a>
图片标签 img。
可插入的图片类型有:gif、jpg、png。
img的属性定义：
-
src:图像的源文件。
<img src="图片地址" width="400px" hegiht="200px">
-
alt:图片显示不出来的时候提示的文字。
<img src="图片地址" width="400px" hegiht="200px" alt="提示的文字">
-
width、height：宽度和高度。 -
border:边框。
属性有很多，这里就写常用的。
相对路径和绝对路径
- 相对路径：相对于页面所在的路径。两个标记
.和..分别代表当前目录和父路径。
<!-- 当前路径 -->
<img src="1.jpg">
<!-- 上一级路径 -->
<img src="./1.jpg">
绝对路径的两种写法:
- 网络路径
<img src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=400924126,3689161470&fm=26&gp=0.jpg"> - 盘符路径
<img src="C:\Users\Desktop\html\img\1.jpg">
尽可能的使用相对链接。检测代码要容易的多。
浏览器只在同一服务器上查找被请求的文件，则需要使用绝对路径。
表单元素<input>
HTML <input>元素用于交互式控件。
表单处理程序action和传送方法method是必不可少的参数
语法：
<form action="要提交的地址"></form>
action：可以是绝对地址，也可以是相对地址。
1、name表单名称用于给表单命名，为了防止混乱，一般需要命名。
<form name="form1" action="提交地址"></form>
2、传送方法method。表单的method属性用于指定在数据提交服务器的时候使用哪种HTTP提交方法：get或post。
属性:
-
type="属性值"：文本类型属性可以是：
text：(默认)。
password：密码类型。
radio：单选按钮。
checkbox:多选按钮。
checked:按钮处于选中状态。
submit：提交按钮。
reset：重置按钮。清空当前表单内容。
img：图片按钮
button：普通按钮，结合js代码进行使用。
file：文件选择框。
value="内容"：文本框里的默认内容(已经被填好的)
size="15"：表示文本框可以显示15个字符，一个英文或一个中文都算一个字符。
readonly：文本框只能,不能编辑。
disabled:文本框只读，不能编辑。
下拉列表
<select>:下拉列表标签。
<select>：标签里面的每一项用<option>表示select是选择,option是选项。
网友评论