HTML5学习笔记

来源：互联网发布：封天战神进阶数据编辑：程序博客网时间：2024/06/05 19:19

笔记本查看端口号有没有被占用：运行cmd，输入netstat -anb

标签分两种：

双标记标签——<标签名>....</标签名>

单标记标签——<标签名/>

快捷键——快速打开桌面：Win+D

Web三要素：

1.服务器：Server

2.客户端：各种浏览器

3.HTTP/HTTPS协议

HTML基本结构

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

所有标签都具备下列四个属性：

1.id：整个文档每个标签可以声明一个唯一的id号

2.styte：为元素制定css样式

3.class：指定元素所属的类型

4.titile：制定标签的弹出式提示语

eg：<font id="aa" color="red" class="" style="" title="这是一个标题"

常用标签：

文件类型 <HTML></HTML> （放在档案的开头与结尾）

文件主题 <TITLE></TITLE> （必须放在「文头」区块内）

文头 <HEAD></HEAD> （描述性资料，像是「主题」）

文体 <BODY></BODY> （文件本体）

文本样式相关标签

加粗 <B></B>

斜体 <I></I>

底线 <U></U> （尚有些浏览器不提供）

水平线 <hr/>

换行 <br/>

标签名含义常用属性类型html放在档案的开头与结尾 head描述性资料，像是「主题」 title必须放在「文头」区块内 <meta/>定义网页的元数据 body文件本体 <b></b>bold 文本加粗,描述样式xhtml中已废弃inline<strong></strong>文本加粗，描述语义xhtml中推荐代替<b>inline<i></i>斜体xhtml中已废弃inline<em></em>斜体xhtml中推荐代替<i>inline<u></u>underline 下划线 inline<s></s>strike 删除线，描述样式 inline<sub></sub>下标，描述样式 inline<sup></sup>上标，描述样式 inlineh1,h2....h6header,标题字，描述语义一级标题最大，六级标题最小。标题字在不同的浏览器中的默认字体高度、间距都不同block<p></p>paragraph文章的段落，描述语义 block<pre></pre>定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。一个常见应用就是用来表示计算机的源代码 <span></span>行内分区，是一个最简单的inline元素必须配合css或js才能有效果inline<div></div>元素分组，层。常用于内容分层，页面布局，是一个最简单的block元素配合css使用（div+css布局）block<hr/>horizontal rule 水平分割线width、color、align（对齐方式）block<img/>通知浏览器此刻应该向服务器发起一个图片请求src指定图片的URL路径、width、heightinline
<img src="11.jpg"/><a></a>定义超链接，用于从一张页面链接到另一张页面。 <a href="http"//www.baidu.com">百度网</a><option></option>下拉列表

<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。

注释：如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。

value：选项的值
selected：预选中

</select>

<textarea></textarea>文本域，多行文本输入框，只能输入纯文本name、rows（行，指显示出的行数）、cols（列，指放入英文字母的列数）inline注意：textarea只是纯文本剪辑框，要想输入各种样式的文本、图片、表格等需要使用“富文本编辑框”——可使用第三方工具实现此效果<select></select>下拉式选单和滚动列表name：选项框命名
size：大于1，则为滚动列表
multiple：设置多选<select name="cars" multiple="mulpitle" size="2"><optgroup></optgroup>
值在开始标记和结束标记之间，无value属性用于组合选项。当使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易 <input type="xxx"/>单行文本输入框。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。name（必需）指定输入的内容的含义。
value 待提交的值/提示文本
checked：设置默认被选中
maxlength 允许输入的最多的字符数
min 规定输入字段的最小值。
pattern 规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
required 属性规定必需在提交之前填写输入字段。
src 定义以提交按钮形式显示的图像的 URL。
readonly 只要出现即表示输入域只读（不能改但可以提交）
disabled 只要出现即表示输入域禁用（不能改且不能提交）
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。
submit（提交按钮,提交表单内容）、file（选择文件）、radio（单选按钮）、checkbox（复选框）、
password（密码框）、
text（单行文本框）inline
<input type="hidden"/>在表单中添加一个隐藏字段name（必需）隐藏字段的名
value（必需）隐藏字段的值 <from></from>用于为用户输入创建 HTML 表单。action：指定表单数据的处理页面（动态页面）
method：GET/POST，前者把请求数据追加在地址栏查询字符串中（有长度限制）；后者把数据以单独的数据包发送给服务器（无长度限制、且可以用于文件上传）
enctype：EncodeType 表单中提交的数据的编码类型，可取值：
text/plain 表单数据不做任何编码直接上传
application 把表单中的数据（中文、特殊符号）编码后再上传，只能对字符进行编码
multipart/from-data 以一种特殊的格式上传字符、字节数据block表单（from）：用于收集用户的数据，提交给服务器上某个页面，该页面可以对表单中提交的数据进行保存或查询（有php/jsp/aspx来担当）
表单中实现文件上传必须满足：
1.表单中使用<input type="file" name=""/>选择文件
2.表单必须使用POST 提交 method=“post”
3.表单的编码类型必须声明为 enctype=“multipart/from-data”<ul></ul>无序 HTML 列表type:disc/circle/squareblock
<li></li>定义列表项目，和<ul>/<ol>配合使用li{list-style:none;}/*消除无序列表前的黑圆点*/block<ol></ol>定义有序HTML列表type:1/a/A/i/I
start:从某个数字开始定义block
<dl></dl>定义了定义列表 block
<dt></dt>定义了定义列表中的项目（即术语部分）。 block
<dd></dd>在定义列表中定义条目的定义部分。 block<label></label>将文本与控件联系在一起后，单击文本，效果就同单击控件一样for:表示与该元素相联系的控件的ID值inline<table></table>简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 <thead></thead>定义表格的表头。该标签用于组合 HTML 表格的表头内容。 <tr></tr>定义表格行 <th></th>定义表头 <td></td>定义表格单元 <tbody></tbody>表格主体（正文）。该标签用于组合 HTML 表格的主体内容。 <tfoot><tfoot>定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的标注内容。 <button></button>定义一个按钮。 <fieldset></fieldset>为控件分组 block
<legend></legend>为分组指定一个标题 block
<iframe></iframe>在当前页面中嵌入另一个页面src待嵌入的页面的url
width
height
style=“border：0”不显示边框inline<details></details>描述文档或文档某个部分的细节
<summary></summary>包含 details 元素的标题，"summary" 元素用于描述有关文档或文档片段的详细信息

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

<meter></meter> 定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。 inline
<time></time>为网页内容添加日期和时间信息datetimeinline<mark></mark>定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。 inline
<header></header>定义文档的页眉（介绍信息）。 <nav></nav>定义导航链接的部分。

<nav>

<a href="/html/html_intro.asp">Previous</a>

</nav>

<aside></aside>定义其所处内容之外的内容。

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

<footer><footer>定义文档或节的页脚。 <article></article>规定独立的自包含内容。 <section></section>定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

html元素的类型：

1.区块元素（block)：必须处于独立的一行中

2.内联元素（inline）：可以与其他内容处在一行中

html转义字符：

基本格式：&xxx

输入> >

输入< <

空格  

& &

注册商标TM ® ™ ®

html注释：不需要浏览器处理或显示，可用于以后的调试或源码读取方便。注意：注释不能嵌套。

html中的按钮

1.<button></button> 在表单外调用一个js函数是使用

2.<input type="button"/> 在表单内调用一个js函数时使用

3.<input type="submit"/> 在表单内提交表单，一个提交按钮

4.<input type="reset' value=""/> 在表单内重置所有已输入的内容为初始值

5.<input type="image" src=""/> 在表单内显示一个图片按钮，可用于提交表单，作用与<input type="submit"/>一样

html5为了页面布局新增了如下标签：

上述标签本质与DIV完全一样，无显示效果，仅仅是一个最简单的区块元素——见名知

html中的列表

1.无序列表：ul，unorderlist

2.有序列表：ol，orderlist

3.定义列表：dl，definitionlist
列表项：li， list ltem

2016/8/13 13:56:12

阅读全文

0 0