标签：标签元素表单学习 HTML5 textcolor type red

Html5学习

1、初识HTML

HTML：\(\textcolor{red}{H}\)yper \(\textcolor{red}{T}\)ext \(\textcolor{red}{M}\)arkup \(\textcolor{red}{L}\)anguage：超文本\(\textcolor{red}{标记语言}\)，包括文字、图片、音频、动画等。
W3C：\(\textcolor{red}{W}\)orld \(\textcolor{red}{W}\)ide \(\textcolor{red}{W}\)eb \(\textcolor{red}{C}\)onsortium (万维网联盟)：\(\textcolor{red}{中立性技术标准机构}\)
- W3C标准
  - \(\textcolor{red}{结构}\)化标准（HTML、XML）
  - \(\textcolor{red}{表现}\)标准语言（CSS）
  - \(\textcolor{red}{行为}\)标准（DOM、ECMAScript）

2、网页基本标签

DOCTYPE标签：告诉浏览器，我们要使用什么规范
title标签：网页标题
meta描述标签：用来描述网页的一些信息；一般用来做SEO
head头部标签：网页头部
body标签：网页主体

2.1 标题标签

<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 段落标签

<!-- 段落标签 <p> -->
<p> 两只老虎 两只老虎，</p>
<p> 跑得快  跑得快，</p>
<p> 一只没有耳朵，</p>
<p> 一只没有尾巴，</p>
<p> 真奇怪 真奇怪！</p>

2.3 换行标签

<!-- 换行标签 <br/>-->
<p>
    两只老虎 两只老虎，<br/><br/>
    跑得快  跑得快，<br/><br/>
    一只没有耳朵，<br/><br/>
    一只没有尾巴，<br/><br/>
    真奇怪 真奇怪！
</p>

2.4 水平线标签

<p> 真奇怪 真奇怪！</p>
<!-- 水平线标签 <hr/> -->
<hr/>
<!-- 换行标签 -->
<p>两只老虎 两只老虎，</p>

2.5 字体样式标签

<!-- 字体样式标签 粗体、斜体-->
<strong>粗体：I love you!</strong><br/><br/>
<em>斜体：I love you!</em>

2.6 注释和特殊符号

<!-- 注释快捷键：
 单行注释：Ctrl+/
 多行注释：Ctrl+Shift+/
-->
<!-- 1、空格 &nbsp;-->
<!-- 2、大于 &gt;-->
<!-- 3、小于 &lt;-->
<!-- 4、版权 &copy;-->

2.7 图像标签

<!--图像标签
 src(必填): 图片路径
 alt(必填): 图片描述
 title: 鼠标悬停显示文字
 -->
<img src="../resource/img/head.jpg" alt="头像图片" title="微信头像">

2.8 链接标签

文本超链接

<!-- 文本超链接
href: 链接路径
target: 目标窗口位置，常用值:_self,_blank
       _blank: 在新页面打开
       _self:  在自身页面打开
-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度页面</a>

图像超链接

<!-- 图像超链接 -->
<a href="ImageLabel.html">
  <img src="../resource/img/head.jpg" alt="微信头像" title="头像" width="100" height="100">
</a>

锚链接

<!-- 锚链接
1、需要一个标记
2、跳转到底部
-->
<a href="top">顶部</a><br/><br/>
、、、、、、、
、、、、、、、
、、、、、、、
<a href="#top">回到顶部</a>

功能性链接

邮件链接

<!-- 1、邮件链接 mailto-->
<a href="mailto:[email protected]">点击联系我</a>

QQ链接（QQ推广）

<!-- 2、QQ链接 -->
<a href="http://wpa.qq.com/msgrd?v=3&uin=2890514017&site=qq&menu=yes" target="_blank">
  <img src="http://wpa.qq.com/pa?p=2:2890514017:53" alt="">
</a>

3、元素

3.1 块元素、行内元素

块元素：无论内容多少，独占一行（p、h1~h6）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em....）

3.2 列表

有序列表（ol）：应用范围：试卷、问卷

<ol>
    <li>java</li>
    <li>python</li>
    <li>前端</li>
    <li>运维</li>
</ol>

无序列表（ul）：导航、侧边栏

<ul>
    <li>java</li>
    <li>python</li>
    <li>前端</li>
    <li>运维</li>
</ul>

自定义列表（dl）：公司网站底部

dl：标签
dt：列表名称
dd：列表内容

<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>python</dd>
    <dd>前端</dd>
    <dd>运维</dd>

    <dd>南京</dd>
    <dd>上海</dd>
    <dd>杭州</dd>
</dl>

3.3 表格

表格主体标签：table
行标签：tr

列标签：td

跨行：rowspan
跨列：colspan

<!-- 表格table
行 tr
列 td
-->
</body>
<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-2</td>
    <td>3-3</td>
  </tr>
</table>

3.4 媒体元素

视频元素（video)
- src：资源路径
- controls：控制条（必须有，否则视频无法播放）
- autoplay：自动播放
```
<video src="../resource/video/video.mp4" controls>音乐MV</video>
```
音频元素（audio)
- src：资源路径
- controls：控制条（必须有，否则视频无法播放）
- autoplay：自动播放
```
<audio src="../resource/audio/audio.mp3" controls>美丽的神话</audio>
```

4、网页的布局

4.1 页面结构分析

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

<header>
  <h1>网页头部</h1>
</header>

<section>
  <h2>网页主体</h2>
</section>

<footer>
  <h3>网页脚部</h3>
</footer>

4.2 iframe内联框架

src：地址
w-h：宽度和高度
name：框架标识名

<iframe src="" name="hello" frameborder="0" width="200px" height="100px"></iframe>

5、表单及表单应用

表单元素
- 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时, 按钮是否被选中

表单的post 和 get提交

action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post、get提交方式

<form action="BaseLabel.html" method="get">
<!--  文本输入框: input type="text" -->
  <p>姓名：
    <input type="text" name="username">
  </p>
<!-- 密码框：input type="password"-->
  <p>密码：
    <input type="password" name="password">
  </p>
  <p>
<!-- 提交框: input type="submit" -->
    <input type="submit" name="提交">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- 重置框：input type="reset"-->
    <input type="reset" name="重置">
  </p>
</form>

文本框

type：text
value
size
maxlength

<p>姓名：
  <input type="text" name="username" value="周四" size="20" maxlength="8">
</p>

单选框

type：radio
value：单选框的值
name：表示同一个组

<p>性别：
  <input type="radio" value="man" name="sex"/>男
  <input type="radio" value="woman" name="sex"/>女
</p>

多选框

type：checkbox
value：多选框的值
name：表示同一个组

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="game" name="hobby"/>游戏
    <input type="checkbox" value="basketball" name="hobby"/>篮球
    <input type="checkbox" value="football" name="hobby"/>足球
</p>

按钮

普通按钮 type：button
图片按钮 type：image
提交按钮 type：submit
重置按钮 type：reset

<p>按钮：
    <!-- 普通按钮 -->
    <input type="button" name="btn1" value="点击编程"/>
    <!-- 图片按钮 -->
    <input type="image" src="../resource/img/head.jpg" width="100px" height="100px"/>
    <br><br>
    <!-- 提交按钮 -->
    <input type="submit" name="提交"/>
    <!-- 重置按钮 -->
    <input type="reset" name="重置"/>
</p>

文件域

type：file

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

下拉框

select：标签
name：下拉框名称
option：选项标签
value：选项值
selected：默认选中

<p>城市：
    <select name="城市" id="city">
        <option value="Nanjing" selected>南京</option>
        <option value="Suzhou">苏州</option>
        <option value="Shanghai">上海</option>
        <option value="Hangzhou">杭州</option>
    </select>
</p>

文本域
- id：定义文本域的唯一id属性
- cols：指定每行显示的字符数
- row：指定显示的文本行数(无滚动条)
```
<p>反馈：
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
```

搜索框滑块

滑块

<p>滑块：
    <input type="range" name="voice" min="0" max="100" step="2"/>
</p>

搜索框

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

简单验证

邮件验证

<p>邮箱：
    <input type="email" name="email"/>
</p>

URL验证

<p>URL:
    <input type="url" name="url"/>
</p>

数字验证

max：最大限制数
min：最小限制数
step：每次添加/减少的数量

<p>商品数量：
    <input type="number" name="num" max="100" min="0" step="10"/>
</p>

表单的应用
- 隐藏域（hidden）: 提交默认值
- 只读（readonly）
- 禁用（disabled）
- 增强鼠标可用性（label）
```
<p>
    <label for="search">查询</label>
    <input type="search" name="search" id="search"/>
</p>
```

6、表单初级验证

placeholder：提示信息，可用于文本输入框的控件中

<p>姓名：
  <input type="text" name="username" placeholder="请输入姓名"/>
</p>

required：非空判断，可用于文本框中，提示文本框不能为空
```
<p>密码：
  <input type="password" name="pwd" required>
</p>
```

pattern：正则表达式，可用于自定义一些内容，如自定义邮箱

<!--  常用正则表达式：https://www.jb51.net/tools/regex.htm -->
<p>自定义邮箱：
  <input type="text" name="diymail" pattern="  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

7. 回顾与总结

标签：标签,元素,表单,学习,HTML5,textcolor,type,red
From： https://www.cnblogs.com/moon888/p/17294140.html

HTML5学习

Html5学习

1、初识HTML

2、网页基本标签

2.1 标题标签

2.2 段落标签

2.3 换行标签

2.4 水平线标签

2.5 字体样式标签

2.6 注释和特殊符号

2.7 图像标签

2.8 链接标签

3、元素

3.1 块元素、行内元素

3.2 列表

3.3 表格

3.4 媒体元素

4、网页的布局

4.1 页面结构分析

4.2 iframe内联框架

5、表单及表单应用

6、表单初级验证

7. 回顾与总结

相关文章

赞助商

阅读排行

HTML5学习

Html5学习

1、 初识HTML

2、网页基本标签

2.1 标题标签

2.2 段落标签

2.3 换行标签

2.4 水平线标签

2.5 字体样式标签

2.6 注释和特殊符号

2.7 图像标签

2.8 链接标签

3、元素

3.1 块元素、行内元素

3.2 列表

3.3 表格

3.4 媒体元素

4、网页的布局

4.1 页面结构分析

4.2 iframe内联框架

5、表单及表单应用

6、表单初级验证

7. 回顾与总结

相关文章

赞助商

阅读排行

1、初识HTML