HTML学习

1、网页基本标签

粗体：

<strong> I love you</strong>

斜体：

<em>I love you</em>

特殊符号：

  空格
> 大于
< 小于
© 版权符号

分割线：

<hr />

2、图片标签

<img src="path" alt="text" title="text" width="x" height="y" />

• src:路径

• alt:图像替代文字，出错的时候显示文字

• title: 鼠标悬停文字

• …/ 表示返回上级目录

3、超链接

<a href="s.html" target="_bank">点击跳转</a>
href : 必填，表示要跳转到的页面
target: 表示窗口在哪里打开， _bank新标签打开， _self: 当前标签打开

• 图片跳转链接

<a href="https://www.baidu.com" target="_bank">
    <img src="../image.jpg" alt="图片在这里">
</a>

• 锚链接

1.需要一个锚标记
2.跳转到标记

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

• 上面是同一个页面的跳转
• 下面实现不同页面的跳转

<a href="4.html">跳转</a> //点击跳转到4.html页面
<a href="4.html#down">添转</a> //到4.html的down这个位置

• 邮件链接

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

• qq链接
  • 到qq推广的推广工具上实现

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0"     src="http://wpa.qq.com/pa?p=2::51" alt="点击联系我" title="点击联系我"/>
</a>

4、块元素

无论多少内容，独占一行

5、列表标签

• 有序列表

<ol>
    <li>java</li>
    <li>python</li>
</ol>

• 无序列表

应用： 导航，侧边栏

<ul>
    <li>java</li>
    <li>python</li>
</ul>

• 自定义列表

dl : 标签
dt: 列表名称
dd: 列表内容
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

6、表格标签

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

<table>
    
</table>

<table border="1px"> <!--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>

7、音频和视频

<!--
src:资源路径
controls : 控制条（进度条）
autoplay: 自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/1.mp3" controls autoplay></audio>

8、页面结构

<header>
    <h1> 网页头部</h1>
</header>
<section>
    <h1> 网页中部</h1>
</section>
<footer>
    <h1> 网y脚部</h1>
</footer>

9、iframe内联框架

<!--
iframe内联框架
src : 地址
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="列表标签.html" target = "hello">点击跳转</a>

10、表单学习

<!--
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post和get两种方式
   post:比较安全，不会显示提交的数据，传输大文件
   get：可以在url中看到提交的信息，不安全，但是高效
-->
<!--文本输入框  ： input type="text"-->
<!--密码框 ：input type="password" -->
<form action="列表标签.html" method="get">
  <p>名字：<input type="text" name="username"> </p>
  <p>密码：<input type="password" name="password"></p>
  <p>
    <!--submit: 提交  reset: 重置-->
    <input type="submit"> 
    <input type="reset" value=“重置信息"> 
  </p>
</form>

value : 初始值
maxlength: 最大长度
size: 文本框长度

• 单选框

<!-- 
input type="radio" 
value: 单选框的值
name : 表示组，两者要相同，才不会一起选择两个
check: 默认选中
--> 
<p>性别：
    <input type="radio" value="boy" name="sex" check/> 男
    <input type="radio" value="girl" name="sex"/> 女

• 多选框

<p>多选按钮：
    <input	type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>代码
    <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” 重置

• 下拉列表

 <p>国家：
    <select name="列表名称" id="1">
      <option value="china" selected>中国</option>
      <option value="usa">美国</option>
      <option value="yindu">印度</option>
      <option value="eng">英国</option>
    </select>
  </p>

• 文本域

<p>反馈信息：
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>

• 文件域

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

• 简单验证

<!--邮箱验证-->
  <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>
<!--  滑块-->
  <p>音量大小:
    <input type="range" name="voice" min="0" max="100" step="1">
  </p>
<!--  搜索框-->
  <p>搜索:
    <input type="search" name="search">
  </p>

11、表单的应用

• 隐藏 hidden

• 只读 readonly

• 禁用 disabled

• 增强鼠标的复用性，点击制动锁定文本框

<label for="mark">点击</label>
<input type="text"/>

12、表单的初级验证

• placeholder : 提示信息，比如"请输入用户名"之类的

• required : 不能为空

• pattern ： 正则表达式

 <p>
     <label for="mark">自定义邮箱</label>
     <input type="text" id="mark" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
   </p>

2021、09、22
r=“mark”>点击

## 12、表单的初级验证

+ placeholder : 提示信息，比如"请输入用户名"之类的

+ required : 不能为空

+ pattern ： 正则表达式

  [常用的正则表达式]: https://c.runoob.com/front-end/854/

  

```html
 <p>
     <label for="mark">自定义邮箱</label>
     <input type="text" id="mark" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
   </p>

2021、09、22