HTML学习

一、元数据

标签有很多，需要慢慢发掘。

<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是选项。

HTML学习

一、元数据

二、HTML标签

表单元素<input>

下拉列表

表单元素`<input>`