Web初级——HTML5

HTML

Hyper Text Markup Language（超文本标记语言）

W3C标准

World Wide Web Consortium万维网联盟

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

网页基本内容

注释

```

```

网页头部

<head>
    <meta name="网页关键词" content="关键词的描述">
    ...
    <title>网页标题</title>
</head>

网页主体

基本标签

<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h2>三级标签</h2>
<!--段落标签-->
<p>一个段落</p>
<!--换行标签-->
这是换行符:<br/>
<!--水平线标签-->
    <hr/>
<!--字体样式标签-->
粗体: <strong>我是粗体</strong>
斜体: <em>我是斜体</em>
<!--特殊符号-->
空格: &nbsp<br/>
大于号: &gt<br/>
小于号: &lt<br/>
</body>

图像标签

<img src="图片路径" alt="图片名" width="100" height="100" title="悬停显示">

基本链接标签

target参数中： blank表示在一个新窗口中打开链接

self表示在本窗口打开链接
```
<a herf="链接路径" target="">链接名（文本或者图像）</a>
```

锚链接标签

1.首先需要一个锚标记

<a name="标记名">...</a>

2.跳转到标记

<a herf="路径（默认为本页面路径）+#标记名">...</a>

功能性链接标签

邮件链接
```
<a herf="mailto:邮箱地址">...</a>
```
qq链接

qq推广，登录即可

列表标签

<!--有序列表-->
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<!--无序列表-->
<ul>
    ...
</ul>
<!--自定义列表-->
<dl>
    <dt>列表名</dt>
    <dd>列表项</dd>
</dl>

表格标签

<table border="1"><!--border为1表示显示表格边框-->
    <tr><!--行-->
        <td></td><!--列-->
        <td colspan="n">一行独占几列</td>
        <td rowspan="">一列独占几行</td>
    </tr>
</table>

媒体元素

视频：参数：

controls 显示视频播放按钮

autoplay 视频自动播放
```
<video src="路径" 参数列表></video>
```
音频：参数同视频
```
<audio src="路径" 参数列表></audio>
```

页面结构分析

网页进阶内容

iframe内联框架

<iframe src="页面地址" name="框架名" width="" height="" ></iframe>
<!--向网页中内嵌另一个网站,也可以联合链接标签使用-->
<iframe src="" name="hello" width="" height="" ></iframe>
<a herf="http://www.baidu.com" target="hello">跳转</a>
<!--这时候点击跳转即可在iframe中加载a链接-->

post表单和get提交

参数：action 表单提交的位置，可以是网站也可以是请求处理地址

method ：1.post提交方式

2.get提交方式信息会附加在url中，不安全

<body>
<form method="post" action="HelloWorldTest.html">
    <!--输入文本框-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码文本框-->
    <p>密码：<input type="password" name="pwd"></p>
    <p><input type="submit"><input type="reset"></p>
</form>

文本框和单选框

文本框参数：name = 文本名

value = 默认文本

maxlength = 最长文本长度

size = 文本框长度
```
<input type="text" 参数列表/>
```
单选框参数：name = 框组，一组内只能选一个选项

value = 权值
```
<input type="radio" 参数列表/>
```

按钮和多选框

按钮参数：value = 按钮显示的标识

<input type="button" name="but" value="点击">
<!--图片按钮-->
<input type="img" src="路径">

多选框：name = 组

<input type="checkbox" name="" value="">

列表框文本域和文件域

<select name="标识名">
    <option value="China">中国</option>
          ...
</select>

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

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

搜索框滑块和简单验证

简单验证：email验证邮箱 url 验证定位符 number(max最大值min最小值step步长)验证数字

<input type="email" name="e">
<input type="url" name="u">
<input type="number" name="num" max="" min="" step="">

滑块

<input type="range" name = "range" max="" min ="" step="">

搜索框

<input type="search" name="sch">

表单的应用

只读标签 readonly
禁用 disabled
隐藏域 hidden

点击锁定光标到指定位置

<label for="target">点我跳转到target</label>
<input type="text" id="target">

表单初级验证
- 提示信息 placeholder
```
<input type="text" placeholder="请输入...">
```
- 非空判断 required
- 正则表达式 pattern
```
<input type="text" pattern="[0-9]">
```

posted @ 2021-03-22 18:02 姬如乀千泷阅读(61) 评论(0) 收藏举报

刷新页面返回顶部

姬如乀千泷

积跬步，以致富翁