HTML笔记

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 网页自适应

<meta charset="UTF-8"> 制定网页编码

<meta name="keywords" content="" > 关键字,用于,被搜索时

<meta name="description" content="" > 网站简介，被搜索时显示

meta是坐标签的主要

<a>是站外连接 <link>是站内

百分比是相对父元素

复制上一行：shift+alt+↓

段落中间直接跳转下一行：ctrl+enter

注释：ctrl+/

1. &lt;（小于号<）

2. &gt;（大于号>）

3. &nbsp;（空格）

4. &quot;（引号）

5. &copy;（版权符号©）

6. &reg;（注册商标®）

7. &amp;（和号&）

8. &yen;（人民币¥）

9. &deg;（度数°）

10. lorem 生成乱码字符

<base> 以这个界面为基础界面 target="_blank"是在新界面打开

<base href="../img/" target="_blank">

一些特殊字体要用符号串表示

<div> 独占一行

• <li>里可以放任意标签，但是<ol>里只能放<li>
  <ol>的数字是自动生成的 type：1，a，A，i，I ；start：只能是一个数字

• 无序列表 创建三个包含aaa的

type:disc,circle,square,none(前面没有东西 用得多)

ul>li{aaa}*3

• 自定义列表 最好连着dl一起复制

<img src="图片位置" title:"鼠标悬停的提示信息" alt="图片不显示/显示失败的提示信息">

仅设置宽或者高会按照比例缩放

11. 引用上级文件： ../cover1.jpg

12. 引用同级文件： cover1.jpg

13. 引用下级文件： cover/cover1.jpg

14. 引用上上级文件： ../../cover1.jpg

..代表上一级

<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>

数据表格创建

table>tr*2>td*2

td：如果一个单元格的设置宽度，影响的是一整列的宽度（高度一样）

Colspan=“2”合并两列 ；Rowspan=“2”合并两行

    <table border="1"  width="500" height="500" align="center"> <!--创建表格-->
        <tr align="center"> <!--创建行-->
            <td>1</td> <!--创建单元格-->
            <td>2</td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

multiple 多数的

• get是从服务器上获取数据，post是向服务器传送数据

• get从url中可以看到，安全性低

• get传送的数据量较小，有限制

• 数据查询，get；数据添加、修改或删除，post

<!--CSS外部引用方式-->
<link rel="stylesheet" type="text/css" href="styles.css">  <!--href里填文件路径-->
<!--CSS外部引用方式-->
        <style type="text/css">
            @import url(styles.css);  <!--（）里填文件路径-->
        </style>

• 特殊形状添加热区

map和area给特殊图形添加链接

area能添加的热区的形状：矩形、圆形、多边形

<img src="图片链接" usemap="#map1">  通过usemap属性与map建立关系
<map name="map1">
<area shape="形状" coords="坐标"href="链接"alt="">
</map>

shape

rect 矩形(取左上角和右下角坐标)

circ 圆(取圆心坐标和半径)

poly 多边形(取每个顶点坐标)

coords

"205 83 386173"|"300 130 50"|"多边形取每个顶点坐标相连"

• 输入框 <input type="" name="" 属性 >

（所有需要提交form表单的数据必须有name属性）

属性

禁用disabled="disabled"

选中 checked

必填 required

类型

文本输入框 text

密码输入框 password

单选框 radio（用name值分组）

复选框 checkbox（用name值分组）

普通按钮 button

提交按钮 submit（form表单）

重置按钮 reset（form表单）

文件选择框 file

• HTML5中对正则的支持

<form>
用户名：<inputtype="text" required ><br>（有required此项必填）
电话：<inputtype="text" pattern="^1[358]/d{9}$">
邮箱：<input type="email" >（初步校验是否为邮箱）
数字：<input type="number"min="0" max="100"step="10" >
（最大最小值）（按一次跳跃到step的整倍数）
数字滑块：<input type="range"min="0" max="100"step="1">
搜索框：<input type="search" placeholder="提示字，一点就没了" >
<input type="submit" value="提交">
</form>

type="email"（初步校验是否为邮箱）

type="url"（初步校验是否为网址，需要输入https://）

type="number"（只能输入数字，并且附有递增递减按钮）

type="range"（数字滑块，滑动选择数字）

type="search"（搜索框，右侧有×清空搜索框内容）

date|month|week（日期控件）

color（颜色控件）

tel（电话号码输入框，移动端调起数字键盘）

time（时间控件 小时分钟）

placeholder="提示字，一点就没了"

autocomplete="on|off|new-password"关闭输入提示

autofocus获取焦点

required此项必填

pattern正则表达式 ^开始 $结束 /d任意数字