HTML总结

HTML

W3C : World Wide Web Consortium（万维网联盟)

W3C标准包括:

• 结构化标准语言(HTML、XML)
• 表现标准语言(Css)
• 行为标准 (DOM、ECMAScript )

1.注释 格式

<!--XX-->

2.网页基本标签

1. 标题标签

   XX

   >
2. 段落标签

   XX

   >
3. 换行标签
   
4. 水平线标签

   ---

5. 粗体 XX
6. 斜体：YY
7. 注释和特殊符号 & ; 空格 ：  

3.图像标签

<img src="../../src/resources/picture.png" alt="海绵宝宝" title="你好" height="200px" width="200px">

<!--返回上一级目录的表示方法：../-->     

4.链接标签 （a 标签）

①超文本链接和图像链接

文本超链接

图像超链接

<!--a标签
href: 必填，表示要跳转到那个页面
target: 表示窗口在哪里打开
     _blank:  在新标签中打开
     _self:   在自己的网页中打开

-->
<a href="Test.html" target="_blank">点击我跳转到百度——</a ><!--在新页面中打开-->
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a ><!--在原页面中打开-->

②锚链接：

• 需要一个锚标记 标记顶部

 <a name="top">标记顶部</a> 

• 通过#跳转到标记 回到顶部

  <a href="#top">回到顶部</a>  
  

③功能性链接：

<!--邮件链接：mailto:-->

<a href="mailto:2264351980@qq.com">点击联系我</a>>    

5.块元素和行内元素

块元素：

无论内容多少，该元素独占一行(p标签、h标签…)

行内元素：

内容撑开宽度﹐左右都是行内元素的可以在排在一行( a 标签. strong标签 . … )

6.列表

①什么是列表：

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

②列表的分类：

无序列表

 <ol> <li>无序列表</li>  </ol> 

有序列表

 <ul>  <li>XX</li>  < /ul> 

自定义列表

<dl>  
    <dt>列表名称</dt>
    
    <dd>列表内容1</dd>
    <dd>列表内容2</dd>
    <dd>列表内容3</dd>

</dl>

举例：

<!--有序列表举例：-->
<ol>
    <li>海绵宝宝</li>
    <li>章鱼哥</li>
    <li>派大星</li>
</ol>

<!--无序列表举例：-->
<ul>
    <li>海绵宝宝</li>
    <li>章鱼哥</li>
    <li>派大星</li>
</ul>

<!--自定义列表举例：-->
<dl>
    <dt>学科</dt>

    <dd>英语</dd>
    <dd>数学</dd>
    <dd>语文</dd>
</dl>

7.表格标签 （table标签）

行

<!--
行 tr

colspan 跨列
-->

列

<!--
列  td

colspan 跨列
-->

<!--border加边框-->

<table border="1px">
    <tr>
        <!-- colspan 跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!-- rowspan 跨行-->
        <td rowspan="2">2-1</td>>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
    

8.视频和音频

<!--
video：音频
audio: 视频


src:资源路径

controls: 控制条
autoplay: 自动播放

-->


<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>

9.页面结构分析

元素名	描述
header	标记头部区域的内容（用于整个页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

10. iframe 内联框架

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>


<!--target跳转到“hello”的那个-->
<a href="http://fsso.cnki.net/" target="hello"  >点击跳转</a>

11.表单语法和get提交

属性	说明
type	指定元素的类型.text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
name	指定表单元素的名称
value	元素的初始值，type 为radio时必须指定一个值
size	指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

<!--表单form

action: 表单提交的位置，可以是网站，也可以是一个请求地址
method： 提交方式
       get: 不安全，高效(可以在url中看到提交的信息)
       post: 比较安全，传输大文件 

-->

1.文本框

<!--
文本输入框：  <input type="text" >

密码框：      <input type="password">
-->

<form action="Test.html" method="post">
    
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    
</form>

2.单选框

<!--单选框：

<input type="radio"  name="XXX" value="XXX" /> 

value ：单选框的值
name：表示组
-->

<p>姓名：
  <input type="radio"  name="radio" value="fan1116" id="name1"/>
  <input type="radio" name="radio" value="fan123" id="name2" />
</p>

3.多选框

<!--多选框：

  <input type="checkbox" value="XXX"  name="XXX"/>
-->

<p>兴趣爱好：
    <input type="checkbox" value="sleep"  name="hob"/>睡觉
    <input type="checkbox" value="play" name="hob"/>玩
    <input type="checkbox" value="draw" name="hob"/>画画
    <input type="checkbox" value="read" name="hob"/>读书
</p>

4.按钮、提交、重置

<!--按钮：

 普通按钮：<input type="button" >
 图像按钮：<input type="image" src="资源路径">

提交按钮：<input type="submit">
重置按钮：<input type="reset">
-->

<form action="Test.html" method="post">

    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>

</form>
<p> 按钮：
    <input type="button" name="按钮1" value="点击变大">
    <input type="image" src="../../src/resources/picture.png">
</p>
  <p>
      <input type="submit">
      <input type="reset">
  </p>

5.下拉框

<!--下拉框：


<select name="列表名称">
        <option value="XX" >XX</option>
 </select>


-->

<p>国家：
    <select name="列表名称">
        <option value="china" >中国</option>
        <option value="us" >美国</option>
        <option value="eth" >瑞士</option>
    </select>

</p>

6.文本域

<!--文本域：
cols="50"   50列
rows="10"   10行

<textarea name="textarea" cols="50" rows="10"> 文本内容          </textarea>

-->

<p>反馈：
    
    <textarea name="textarea" cols="50" rows="10"> 文本内容          </textarea>
    
</p>

7.文件域

<!--文件域：

<input type="file" name="files" >

-->

<p>
    <input type="file" name="files" >
    <input type="button" value="上传" name="upload">
</p>

8.邮箱、网站、数字验证

<p>邮箱:
<input type="email" name="email">
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>商品数量:
<input type="number" name="num" max="10" min="0" step="1">
</p>

9.滑块验证和搜索

<p>音量:
     <input type="range" name="voice" min="0" max="100" step="2">
</p>

<p>搜索:
    <input type="search" name="search">
</p>

10.表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

11.表单的初级验证

required 非空验证

placeholder 提示信息

pattern 正则表达式