HTML标签PGW

作者: 秋生秋风起 | 来源:发表于2018-11-11 18:39 被阅读0次

/* 标题样式 # , ## , ### */

HTML~

换行

1.table表格元素

border外边框粗细；
cellspacing每个表格之间的间距；
cellpadding单元边沿与其内容之间的空白。

2.表单元素：input：单行文本框

name=""

属性规定 input 元素的名称

value=""

是input 文本框内的值。是占位符，刷新后，可以显示真实内容在文本框内

placeholder=""

内容不占位。是非占位符，刷新后，只会显示灰色字体，输入内容的时候，会自动覆盖，是文本框的提示语句
readonly 这个属性没有值，它写在input后面，用于显示只读文本，即文本框中的内容不可以修改填写

type="" 属性规定 input 元素的类型

text    定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
button  定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
submit  定义提交按钮。提交按钮会把表单数据发送到服务器。常和PHP使用，用于提交数据。
image   定义图像形式的提交按钮。
reset   定义重置按钮。重置按钮会清除表单中的所有数据。
checkbox    定义复选框。生成这样的框子 □ ，单击打钩，再单击，钩号消失。
            （常见于记住密码模块）传输的数据是Boolean类型的数据
radio   定义单选按钮。生成这样的圆圈 ○ 。单击选中，变成这样 ⊙，再单击，点号不会消失。
        如果定义的所有name都相同的话，就可以变成多选一。
        如果在某一个选项元素后面加上checked="checked"，就会变成默认选项，即刷新后，自动显示选中的。
range   定义滑块。默认从0~100，step是1，value是50（默认就是这些量不写的情况）
        min=""滑块最小值 max=""滑块的最大值 step=""滑块的单次滑动步数 value=""设置滑块初始位置
number  定义数字文本框。（只能输入数字）
        min=""设置数字大小的下限 max=""设置数字大小的上限 value=""设置初始默认的数字
date    （或datetime-local）获取时间。在谷歌浏览器显示的效果相对较好。
hidden  定义隐藏的输入字段。即影藏该文本字段
password    定义密码字段。该字段中的字符被掩码。但是在PHP或其他后台中是以明文的形式进行传输的
image   生成图像按钮
src 地址。就是插入东西原来所在的地址
file    定义上传文件按钮。按钮后面会显示是否上传图片以及上传图片的名称

3.<button> 按钮 </button>

这个按钮通常会和 JS 一起使用，button后面常会接onclick事件

4.<textarea:多行文本框

<textarea rows="20" cols="50">  文本框，文本区域。rows，cols是来控制长宽大小的

5.<select> 下拉列表。

<!--下拉显示选择的内容，内容只能选择，不能重写，区别于datalist-->
<select>
    <option>苹果</option> <!--<option>是设置量-->
    <option>香蕉</option>
    <option>橘子</option>
</select>

6.<datalist>下拉列表，内容可以重写。

<!--datalist常要配合input的text类型使用，并且input的list属性值要和datalist的id值一致-->
<input type="text" list="a">
<datalist id="a">
    <option>苹果</option> <!--<option>是设置量-->
    <option>香蕉</option>
    <option>橘子</option>
</datalist>

7.列表元素：(列表样式可以参考下面的CSS的第5项)

<ol> </ol> 有序列表，内容项前面会显示序号，默认是 compact 升序的，是阿拉伯数字1 2 3...

<ol reversed>  </ol>    降序列表
<ol type="a">  </ol>    设置序号样式，可以是阿拉伯数字、英文字母、罗马数字等等

<ul> </ul> 无序列表，无序标签前面会显示小圆点

<li> </li> 列表中的项

8.插入图片：

<img src="" width="" height="" alt="提示信息">

img是插入图片的
width是设置图片宽度的
height是设置图片长度的
alt是提示性语句，定义图片备用内容。
当图片正常插入的时候，alt内的值是不会显示的；
当插入的图片有问题的时候，或者地址出现错误的时候，会显示alt内部的提示性语句

9.超链接 a标签 href

<a href="xxxxx.html"></a>

点击链接后，在本页面刷新显示

<a href="xxxxx.html" target="_blank"></a>

点击链接后，新建一个空白页刷新显示
target="_blank"新建一个空白页刷新显示

10.创建图片分区响应：

就是一张图片点击不同的区域，会有不同的响应，会有不同的链接

<img src="图片地址" usemap="#a">
<map name="a">
    <area href="xxxx.html" shape="rect" coord="0,0,0,0">
        <area><!--这边的 href 不需要a标签-->
        <area>
        <area>
</map>

map 客户端分区响应图的关键元素（地图）

area 可以有多个area，每个area代表图像上可以被点击的一块区域（地图上的区域）

area元素属性分两类

点击后，导航到指定的url
href 就是链接地址
alt 定义图片提示性语句，和上面第8点插入图片里的alt功能一致
shape属性和coords属性，共同作用，标明用户可以点击各个图像区域
coords 表示所选区域的边缘区域，每个整数值之间用逗号隔开
shape 就是解析画出的area是什么图形

rect表示矩形，coords 的四个值表示图像的左上右下的坐标
circle 表示圆形，coords 的三个值表示图像左边缘到圆心的距离、图像右边缘到圆心的距离、圆的半径
poly 表示多边形，coords 至少有六个值，每个数字代表多边形的一个顶点
dafault 表示默认区域，即整张图，不要coords

不知道这些coords的值的时候，可以用在form的input属性中看

<form>
      <input type="image" src="图片地址">
</form>

这样在单击图片区域的时候，就可以在地址栏中看到所点区域的坐标值了，以后也可以用JS解决

11.视频播放：

<video>

(<audio>为音频播放器，和视频播放器类似)

src 视频地址
width 视频宽度
height 视频长度
autoplay 网页完成后自动播放视频
preload 预先加载视频
    none 不会自动加载
    metadata只加载第一帧
    auto 视频自动全部加载
controls 显示播放、暂停、进度条、音量等播放器控件，其后面没有值
loop 视频循环播放
poster 视频载入时显示图片，就是设置视频载入的第一帧显示的图片
muted 视频静音

<source>

设置视频格式（任何一种视频格式不是所有浏览器都支持的，所以在代码中写入多种格式的视频文件，防止文件放不了）

src 视频地址（同一视频，添加不同的格式）
type 该视频的视频格式

<body>
    <video src="演讲视频.mp4" controls preload="metadata">
        <source src="演讲视频.mp4" type="video/mp4">
        <source src="演讲视频.ogv" type="video/ogg">
        <source src="演讲视频.mkv" type="video/webm">
        <source src="演讲视频.wmv" type="video/wmv">
    </video>
</body>

valign的对齐：有：top（顶对齐） Middle（垂直居中） bottom（底对齐）
position: fixed; 固定，固定在屏幕的某个地方，不会随着滚轮的滚动而变化
top: 0; / bottom: 0; 置顶 / 置底

CSS~

<p> 段落 </p> 中间写每段落的文字
<h1> 标题 </h1> 中间写标题
float: ; 水平放置元素

CSS的创建方法：

① 元素内嵌样式表

eg：

<body>
    <a style="font-size: 40px; color: #ffad2a ">Hello World!</a>
</body>

② 文档内嵌样式表

eg：

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        a
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a> Hello World! </a>
</body>

③ 外部样式表

在外部文件中，建立一个单独的 .CSS 文件
创建方法：CSS样式表（右击）——New——Stylesheet
eg：
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

hello.html文件
<head>
    <meat charset="UTF-8">
    <title> </title>
    <link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
    <a> Hello World! </a>
</body>

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

a.css文件
a
{
    font-size: 40px;
    color: #ffad2a;
}

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

CSS基本选择器：

① 选择所有元素

<style type="text/css">
    *   /*  *标签是指body中的所有内容都将是这种样式*/
    {
        font-size: 40px;
        color: #ffad2a;
    }
</style>

② 根据类型选择元素

<style type="text/css">
    a   /*a 是一个标签，a标签下的内容都将是这种样式*/
    {
        font-size: 40px;
        color: #ffad2a;
    }
</style>

③ 根据类选择元素

class选择器，style中用 . 号访问选择器
可以多个标签共同拥有同一个class名字

④ 根据ID选择元素

id选择器，style中用 # 号访问选择器
一个id只能属于一个标签

⑤ 根据属性选择元素

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        [href]          /*属性选择元素*/
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>

⑥ 其他选择器

既用了属性名，又用了属性值的选择器

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        [href="TestDemo.html"]  /*当出现多个同属性名的内容时*/
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>

⑦ :选择器

如hover属性，鼠标触发时，产生效果的选择器，其实 :选择器有很多的，用到再记
eg：

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        a:hover
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>

hover选择器使用CSS过渡：

①直接过渡（鼠标放上去，瞬间显示效果，效果显示生硬）
<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        p:hover
        {
            width:200px;
            height:200px;
            background-color:#ffad2a;
        }
    </style>
</head>
<body>
<p>    </p>
</body>

②间接过渡（鼠标放上去，产生的过渡效果有延时，画面更为人性化）
<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        p:hover
        {
            width:200px;
            height:200px;
            background-color:#ffad2a;
            transition-delay:1s;  /*鼠标放上去，过1s后，才会变化*/
            transition-duration:500ms;  /*鼠标悬浮，产生动态效果延时500ms，效果平滑过渡，更舒适*/
            transition-property:width;    /*宽度瞬间响应过渡，其他属性平滑过渡。其值内容为上面的属性，效果是值的属性没有延时*/
        }
    </style>
</head>
<body>
<p>    </p>
</body>

1.字体（font）：

font-size: 字体大小 px/16=em

设置 <body>元素的默认字体大小的是百分比

font-family: 字体系列（宋体、微软雅黑）

font-style: 字体样式

值：normal正常字体；italic斜体字；  oblique斜体字（但斜体效果并没有italic强）

font-variant: small-caps; 英文小型大写设置

（将所有字母都设置为大写，但这些大写字符比一般大写字符的尺寸小一些）；如果设置为normal，就是正常字体

font-weight: 设置字体粗细

值可以设置整百，如100、200等，也可以设置为bold、bolder

2.文本（text）：

color: 字体颜色

text-align: 水平对齐方式（左、中、右）

值：left靠左  center居中 right靠右

vertical-align: 垂直对齐方式（上、中、下）

值：top上  center居中  bottom底部

text-decoration: 属性用来设置或删除文本的装饰

值：none删除所有装饰（如下划线）；overline添加上划线；line-through添加中划线；underline添加下划线

text-transform: 指定在一个文本中的大写和小写字母

值：默认一句话首字母大写；uppercase全部大写；lowercase全部小写；capitalize每个单词首字母大写

text-indent: 指定文本的第一行的缩进

letter-spacing:10px; 每个字符间距是10px，汉字也是如此，但英文状态下是每个字母的间距

word-spacing:10px; 英文状态下的，每个单词的间距为10px，但中文状态下没有这种说法

line-height 设置行高

text-index:50px; 首行缩进

text-shadow:1px 2px 3px red; 创建文本阴影。

水平偏移1px，竖直偏移2px，模糊程度3px，阴影颜色是红色。（顺序不能变）

3.背景（background）：

background-color: 背景颜色

background-image: 背景图像，默认情况下图片水平或者垂直方向平铺

background-image:url(picture.jpeg);

background-repeat: 背景图片排版

值：no-repeat不重复显示；  repeat-x在水平方向展开；  repeat-y在竖直方向展开；

background-position: 改变图像在背景中的位置

值：right top显示在右上角

background-attachment 设置背景是否随着滚轮移动；

fixed为不随滚轮移动而移动

background-size 设置背景图片大小

4.CSS中的链接（link）：

有超链接<a href=" ">时

a:link {color:#000000;} /* 未点击访问链的接*/

a:visited {color:#00FF00;} /* 已点击访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:hover 必须跟在 a:link 和 a:visited后面，a:hover{} 为伪类，改鼠标悬停效果对谁做伪类就对谁产生悬停效果

a:active {color:#0000FF;} /* 鼠标点击链接的时候 */

a:active 必须跟在 a:hover后面
值：color、background、text-decoration等，设置四种状态下的效果

5.列表样式（ul）：

ul. 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

ol. 有序列表 - 列表项的标记有数字或字母

list-style：用于把所有用于列表的属性设置于一个声明中
    list-style:none;  去标记
list-style-position：设置列表中列表项标志的位置
    inside  列表项目标记放置在文本以内，且环绕文本根据标记对齐。
    outside  默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-image:  要指定列表项标记的图像，使用列表样式图像属性
list-style-type:  属性指定列表项标记的类型
    ul下，不写是实心小圆点
        circle  空心小圆点
        square  实心小方块
    ol下，不写是阿拉伯数字
        upper-roman  罗马数字
        lower-alpha  字母

6.表格（table）：由一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行；在每行tr中，th或td都是该行的元素

th 元素定义表头，首行加粗；

td 元素定义每行的表格单元。

*合并单元格

 //主要在HTML body内部写
 <td colspan="2">  colspan合并横单元格。合并两个单元格，向右合并，右边可以少写一个td元素
 <td rowspan="2"> rowspan合并列单元格。向下合并2个单元格，下边的单元格可以不写，少写一个td元素

caption 标题

border 表格中的边框正常都是独立的，两个子边框中间都是有间距的

border: 1px solid black; 边框一个像素宽，黑色实线

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

text-align: 表格的值水平对齐方式（左、中、右）

值：left靠左  center居中  right靠右

vertical-align: 表格的值垂直对齐方式（上、中、下）

值：top上  center居中   bottom底部

padding: 距内边框的距离

7.盒子模型box：

Margin：外边距（清除边框外的区域，外边距是透明的。）

Border：边框（围绕在内边距和内容外的边框。）

Padding：内边距（清除内容周围的区域，内边距是透明的。）

Content：内容（盒子的内容，显示文本和图像。）

8.边框（border）：

border-style: 边框样式

值：
none;    无边框
dotted; 点线边框  定义一个点线边框
dashed; 虚线边框  定义一个虚线边框
solid;     实线边框  定义实线边框
double; 双边框      定义两个边框，两个边框的宽度和 border-width 的值相同
groove; 凹槽边框  定义3D沟槽边框，效果取决于边框的颜色值
ridge;    垄状边框  定义3D脊边框，效果取决于边框的颜色值
inset;     嵌入边框  定义一个3D的嵌入边框，效果取决于边框的颜色值
outset;   外凸边框  定义一个3D突出边框，效果取决于边框的颜色值
hidden;  隐藏边框

border-style属性可以有 1 到 4 个值，宽度width、颜色color也一样：

border-style: ___ 四面边框同种样式
border-style: ___ ___ 上下一样，左右一样
border-style: ___ ___ ___ 上一种、左右一种、下一种
border-style: ___ ___ ___ ___ 上、右、下、左逆时针的顺序定样式

可以指定不同的侧面不同的边框，宽度width、颜色color也一样：

border-top-style: 边框上部的样式
border-bottom-style: 边框下部的样式
border-left-style: 边框左边的样式
border-right-style: 边框右边的样式

border-width：属性为边框指定宽度

注：可指定长度或使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin

border-color: 设置边框的颜色

注：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

  border-style: solid;
  border-color: #98bf21;

border-radius 设置圆角边框

eg：
border-radius:20px/15px

同时设置四个圆角，即在四个直角处放置一个圆弧，圆心离左右边框20px，离上下边框15px

9.轮廓属性（outline）：

outline-color：规定边框的颜色：

值：color-name、hex-number、rgb-number、invert、inherit

outline-style：规定边框的样式：

one 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

outline-width：规定边框的宽度：

值：thin、medium、thick、length、inherit

10.外边距（margin）、内边距（padding）：

值：

    auto  设置浏览器边距，这样做的结果会依赖于浏览器
    length  定义一个固定的margin（使用像素，pt，em等）
    %  定义一个使用百分比的边距

margin-top: 距离顶部的距离
margin-bottom: 距离底部的距离
margin-right: 距离右边的距离
margin-left: 距离左边的距离

margin属性可以有 1 到 4 个值：

margin: ___ 四面边距
margin: ___ ___ 上下一样，左右一样
margin: ___ ___ ___ 上一种、左右一种、下一种
margin: ___ ___ ___ ___ 上、右、下、左逆时针的顺序定边距

11.尺寸（dimension）：

height 设置元素的高度。

line-height 设置行高。

max-height 设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

width 设置元素的宽度。

12.显示（display）、可见性（visibility）：

display: none; 影藏元素，元素就不显示，不占用原来的页面空间，进而不影响页面布局

visibility:hidden; 影藏元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:     inline;元素之间没有换行，图片之间就是前后排列而不是上下排列
             none 此元素不会被显示。
             block 此元素将显示为块级元素，此元素前后会带有换行符。就是影藏后的元素可以显示。
             inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
             inline-block 行内块元素。（CSS2.1 新增的值）