html总结

#html总结

1.html基本结构

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

doctype声明:doctype不是一个标签，而是告诉浏览器应该用什么版本来对文件进行声明。

html不区分大小写，但是建议小写。

html注释规则：,支持单行和多行。

2.标签

html：根标签

head标签包含title、script、link、style、meta、base

(1)title:用于写标题

(2)script:

(3)link:用于引入css文件

(4)style:内部引入css

(5)meta

meta提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

<meta charset=’utf-8’ /> 声明编码格式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1” />优先使用 IE 最新版本和 Chrome

<meta http-equiv=”refresh” content=”过多少秒开始跳转;url=跳转地址” />页面重定向和刷新

<meta name=”keywords” content=”your tags” /> 页面关键字

<meta name=“description”content=”120｜ 150 words” /> 页面描述

等等，这里就不一一举例了，嘻嘻。

(6)base

<base target=”_blank” />:点击链接重新打开一个网页

<head>
    <base href="http://www.w3school.com.cn" />
</head>
<body>
    <a href="html/index.asp">W3School</a>
    <!--相同部分可以不写-->
</body>
  • h1-h6 标题标签

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。

  • p 段落标签

有默认的margin

  • em strong 标签

em表示强调，strong表示更强烈的强调

  • div

块级标签，可设宽高，margin,padding等等

  • a 锚点链接

href:地址

title:描述信息

target:规定在何处打开链接文档

  • img 图片

为网页插入图片，下面有默认的间隔，可以使用display:block;消除

src 图像的位置

title 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)

alt 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

  • q标签，短文本引用，不常用

  • blockquote标签，长文本引用

  • br 换行标签

  • hr 分割线标签

  • 列表

(1)无序列表 ul li

(2)有序列表 ol li

(3)自定义列表 dl dt dd 主要用于词语的解释

  • form 表单

action:输入的数据被传送到的地址,比如一个PHP页面(test.php)。

method:数据传输方式，有两种，post和get

input 输入框 type=”text”表示文本框 type=”password”表示密码输入框

name 为文本框命名，以备后台程序ASP、PHP使用

value 为文本输入框设置默认值（一般起到提示作用）

<input type="text" name="" value="">

type=”radio” 表示单选框 type=”checkbox”表示复选框

value 提交数据到服务器的值（后台程序PHP使用）

name 为控件命名，以备后台程序ASP、PHP使用

checked 当设置checked 或 checked=”checked”时，该选项被默认选中

<input  type="radio" name=" " value=" " checked="checked">

注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

  • select 下啦列表框，option 下拉选项，加multiple属性可以实现多选功能，不推荐

    <select multiple>
    <option>***</option>
    <option>***</option>
    <option>***</option>
    <option>***</option>
    <option>***</option>
</select>

  • 表格标签

    <table>
    <tbody><!--可不写-->
        <tr>
            <th>***</th><!--表头-->
            <th>***</th>
            <th>***</th>
            <th>***</th>
        </tr>
        <tr>
            <td>***</td><!--单元格-->
            <td rowspan="2">***</td> <!--表示占两列-->
            <td colspan="2">***</td> <!--表示占两行-->
            <td>***</td>
        </tr>
    </tbody>
</table>

嘻嘻