HTML

HTML(初识)

Hyper Text Markup Language(超文本标记语言)

W3C：World Wide Web Consortium(万维网联盟)

W3C标准

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

基本标签

<!--注释-->

DOCTYPE:告诉浏览器，我们要使用什么规范

meta：描述性标签，一般用来描述我们网站的一些信息，一般做来做SEO搜索引擎优化

一般<></>对应，也可以只有</>,这个称为自闭合标签

标题标签：

<h1>：一级标签

<h2>: 二级标签     依此类推<h3>、<h4>到<h6>

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

粗体和斜体标签

<strong>            <em>

特殊符号

&nbsp；空格    &gt；大于号   <小于号  
&copy； 版权符号

图片标签

<img src="图片地址(必填)" alt="图片名字(必填)" title="悬停文字" width=" " height=" ">

超链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>
<!--a标签
href：必填，表示要跳转到哪个页面
target:
      _blank 在新页面打开
      _self  在自己的网页中打开
-->

锚链接：

跳转到目的点

<a href="#name"></a>
<!--
需要一个锚标志
name为要跳转目标标记的名字
-->

功能性链接

<!--邮箱链接:mailto-->
<a href="mailto:qqnumber@qq.com"> <!--qqnumber@qq.comw为qq邮箱-->
<!--QQ聊天链接，可以去QQ推广官网获取-->

---

列表

<!--有序列表orderlist-->
<ol>
<li></li>      <!--li标签定义列表项目-->
<li></li>
<li></li>
</ol>        

<!--无序列表ul标签-->
<ul>
<li></li>     
<li></li>
<li></li>
</ul>

<!--自定义列表              <dl>
dl:标签                        <dt></dt> 
dt列表名称                      <dd></dd>
dd列表内容                      <dd></dd>
-->                        </dl>

---

表格

<!--表格table     
行  tr
列  td
-->
 <!--rowspan跨行-->
 <!--colspan跨列-->

如实现：

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">番薯坚</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>                                    
    </tr>
    <tr>
        <td rowspan="2">木瓜腾</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

---

媒体元素

<!--视频和音频
control 控制条
autoplay 自动播放
-->
<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>

---

页面结构分析

---

iframe内联框架

在内部嵌入一个网站

<!--
src 引用页面地址
name 框架表识名
-->
<iframe src="path" name ="mainFrame" ></iframe>

---

表单及表单应用（重点）

（以下内容都在form标签内）

表单

<!--表单form
action：表单提交位置 可以是网站，也可以一个请求处理地址 必填
method：post/get提交方式  必填
      get方式提交：我们可以在URL中看到我们提交的信息，不安全，但高效
      post：比较安全，传输大文件
-->
<form action="第二个网页.html" method="post">
    <!--文本输入框：input type="text" -->
    <p> 名字：<input type="text" name="username"></p>
    <!--密码框：input type="password" -->
    <p> 密码：<input type="password" name="pwd"></p>
    <p><input type="submit">
    <input type="reset">
    </p>

</form>

单选框

<!--单选框标签
input type="radio"
value: 单选框的值  必填
name：表示组 ，相同表示同一组 
checked：默认选中
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框

<!--多选框
input type="checkbox"
value: 单选框的值  必填
name：表示组 ，
checked：默认选中
-->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

其他

<!--
input type="button"    普通按钮  
input type="image"    图像按钮
input type="submit"    提交按钮
input type="reset"    重置
-->

下拉框

<!--下拉框，列表
selected：默认选中
-->
<p>国家：
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="india" >印度</option>
        <option value="ruishi">瑞士</option>
        <option value="us">美国</option>
    </select>
</p>

文本域

<!--文本域
cols:显示的列数
rows:显示的行数
-->
<p>反馈
    <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
</p>

文件域

<!--文件域 即上传文件
input type="file" name="files"
-->
<p>
    <input type="file" name="files"></input>
    <input type="button" value="上传" name="upload"></input>
</p>

input中的value的总结

value 属性为 input 元素设定值。

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

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用。

简单认证

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

滑块

<!--滑块
input type="range"
-->
<p>
    <input type="range" name="voice" min="0" max="100" step="10">
</p>

搜索框

<!--搜索框
-->
<p>搜索框：
    <input type="search" name="search">
</p>

---

表单的一些应用

readonly：只读

disabled：禁用

hidden：隐藏域，通常用来设置默认密码然后隐藏掉

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>
<!--点文字跳到文本输入框-->

---

表单的初级验证（重点）

placeholder: 提示信息，运用到所有文本框

required：非空判断

pattern： 正则表达式