HTML第一篇

HTML:

html分为三部分：

1、文档声明：

<!DOCTYPE HTML>

告诉浏览器使用什么样的html或xhtml规范来解析html文档

2、head区域：

是元信息和网站的标题元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息

<title>
<base/>
<link/>（rel、href、type）
<meta/>（http-equiv、name、content）

3、body区域：

是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意

块级标签 <p><h1><table><ol><ul><form><div>

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

　　2.内联标签 <a><input><img><sub><sup><textarea><span>

　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

基本标签（<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
特殊符号（>、<、 、"、©...）
<a> 超链接标签(锚标签)（href、target、name）
<img> 图形标签（src、title、alt、width、height、align）
列表标签（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<table> 表格标签（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<from> 表单标签（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）

HTML三部分的详解：

<head>标签：

1.定义编码格式：

<meta charset="UTF-8">  #定义编码为utf-8

2.刷新跳转：

<meta http-equiv="refresh" content="5">     # 5秒跳转

<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/mosson/" />   #跳转至新的博客地址

3.关键字

一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中

<meta name="keywords" />

4.描述

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5.<title>

<title>我是显示在浏览器头的内容</title>

6.<link>:常用的有三个属性：rel、href、type

rel 规定文档与被链接文档之间的关系。

rel="dns-prefetch" 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其他域名资源时。
rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式
rel="stylesheet" 引用外部样式表
rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于<a>标签，使用场景：网页不被信任或是不希望呗搜索引擎录入的网站。

href 资源的路径（相对路径/绝对路径）

type 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。

7.<style>

　　在当前文件中写Css样式

　　在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

8.<script>

　　在当前文件中写JS

　　在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

<body>标签：

1.body中的常用标签：

<h1>~<h6> 标题标签.

<a> 超链接标签用于跳转到其他的页面

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

　　　　style="text-indent: 2em"可以设置样式为首行缩进两个字符。

　　　　<blockquote></blockquote>可以用来设置整个段落的缩进。

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<u>: 文字下方加下划线.

<em> <i>: 文字变成斜体.

<sup>和<sub>: 上角标和下角标.

<br>:换行.

<hr>:水平线.

<div>

块级标签。块级标签常用于布局，行级标签常用语显示内容。

　　 div的显示通常使用id或class来标识。id为唯一的标签标识，class为标签的类标识。

　　 div的大小是由内容来决定的，默认情况下，高度由内容的高度决定，宽度适应屏幕。

　　可以容纳其他元素，是一个容器。

<span>

2.特殊的符号：

特殊符号    符号码
"    &quot ;
&    &amp ;
<    &lt ;
>    &gt ;
©   &copy ;
®   &reg ;
±   &plusmn ;
×   &times ;
§   &sect ;
¢   &cent ;
¥   &yen ;
·   &middot ;
    &euro ;
£   &pound ;
™   &trade ;

3.<a>标签：常用的属性：href、target、name

　　href:要连接的资源路径格式如下: href="http://www.baidu.com"

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

　　name: 定义一个页面的书签.

<a href="http://www.cnblogs.com/mosson/l"  target="_blank">猛戳这里</a>

4.列表标签：

<ul>: 无序列表

　　<ol>:有序列表

　　 <li>:列表中的每一项.

　　　　　li 的常用属性：type指明项目的类型，属性值有：A，a，I，i，1，disc（实心圆），square（实心正方形），circle（空心圆）。

　　<dl> 定义列表

　　 <dt> 列表标题

　　<dd> 列表项

5.<img>图形标签：重要属性有：src、title、alt、width、height、align。

　　src 图片的路径。

　　title 鼠标悬浮在图片上的文字。

　　alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。

　　align 图片周围文字的垂直对齐情况（过时了）。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。

　　width 图片的宽

　　height 图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="http://www.cnblogs.com/mosson/" alt="图片加载失败。。。" title="The knife girl, kiss"/>

6.<table>表格标签：

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素百分比.（最好通过css来设置长宽）

　　<tr>: table row 表格的数据行

　　 <th>: table head cell 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示

　　<td>: table data cell 单元格，用来显示表格内容

　　rowspan: 单元格竖跨多少行

　　colspan: 单元格横跨多少列（即合并单元格）

　　<th>: table header <tbody>(不常用): 为表格进行分区.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>Title</title>
</head>
<body>
<table border="1" >
    <caption>无聊的小婊砸</caption>
    <thead>
            <tr align="center">
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>女神</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <th>1.</th>
                <td>拉克丝</td>
                <td>18</td>
                <td>是男人</td>
            </tr>
            <tr align="center">
                <th>2.</th>
                <td>炮娘</td>
                <td>21</td>
                <td>是男人</td>
            </tr>
        </tbody>
</table>

</body>
</html>

效果图：

表格合并单元格

 <table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td colspan="3">1 2 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6 9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>
    </table>

合并单元格

7.<form>表单标签：

属性：action、method、enctype

　　action 表单要提交的地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后台就知道如何处理这些数据了）。

　　method 提交的方法，默认是get方式提交。

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　enctype 对表单数据进行编码，默认都是要编码的。格式为：application/x-www-form-urlencoded（表单默认的编码格式，表单发送前对所有字符进行编码。编码规则：空格转换为“+”号，特殊符号转换为ASC HEX值）。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时，编码就需要采用另一种格式：multipart/form-data（不对字符编码，文件上传时使用）。text/plain（是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码）。

表单元素：

<input>的type属性

　　text 文本框输入（默认text文本框类型）。

　　autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用）

　　disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）

　　password 密码框。（以下属性text和password共有）

　　　　size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）

　　　　maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击

　　radio 单选按钮。属性：

name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）

value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

checked（是否被选中的状态）

　　checkbox 复选框。

name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）

value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

checked（是否被选中的状态）

　　file 文件域，上传文件（不同的浏览器表现形式不同）

　　submit 提交按钮。用于提交表单。

　　reset 重置按钮。清空表单的输入，恢复到表单默认的状态。

　　button 普通按钮。一般结合javascript使用。

　　image 图片按钮，用来提交表单，与submit是一样的效果。

src（图片路径）

　　hidden 隐藏字段。

value（隐藏的内容）

　　color 颜色标签。value指定颜色值（采用#十六进制数表示）。

　　date 日期。value值指定默认的日期，格式为****-**-**（年月日）。

　　datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。

　　number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。

　　range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。

　　week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。

<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

　　name （表单提交项的key）

　　cols（设置文本域宽度）

　　rows（设置文本域高度，即行数）

<select> 下拉框标签。使用时要结合<option>子标签一起使用。

name:表单提交项的key

size：选项个数

multiple：多选

<option> 下拉选中的每一项

value（表单提交项的值）
selected（selected下拉选默认被选中）

<optgroup>为每一项加上分组

<label> 把元素与文本结合起来

友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。
这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）

<label for="name">姓名</label>
<input id="name" type="text">

<fieldset> 对表单中的相关元素进行分组

<fieldset>
    <legend>温馨提示</legend>
    <div align="middle">不要忘记点赞哦 ==</div>
</fieldset>

value: 表单提交项的值

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

<iframe> 框架

元素会创建包含另外一个文档的内联框架（即行内框架）

name （设置框架名称。此为必须设置的属性）

src （设置此框架要显示的网页名称或路径。此为必须设置的属性）

scrolling （设置是否要显示滚动条。设定值为auto, yes, no）

bordercolor （设置框架的边框颜色）

frameborder （设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框）

noresize （设置框架大小是否能手动调节）

marginwidth （设置框架边界和其中内容之间的宽度）

marginhight （设置框架边界和其中内容之间的高度）

width（设置框架宽度）

height （设置框架高度

posted @ 2016-07-05 10:47 还能和老板谈感情吗阅读(288) 评论(0) 编辑收藏举报

刷新页面返回顶部

play wife VS paly games

写不完的bug，改不完的需求，活等我睡醒了再说