HTML基础学习

HTML基础学习

基础标签

标题标签

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

段落标签

<p>轻轻的我走了</p>
<p>正如我轻轻的来</p>
<p>我轻轻的招手</p>
<p>作别西天的云彩</p>

换行标签

<p>
    轻轻的我走了<br/>
	正如我轻轻的来<br/>
	我轻轻的招手<br/>
	作别西天的云彩<br/>
</p>

水平线标签

<hr/>

粗体斜体标签

粗体：<strong>轻轻的我走了</strong>
斜体：<em>正如我轻轻的来</em>

注释和特殊符号

<!--注释-->
空&nbsp;&nbsp;&nbsp;格
其他略
更多的查百度

图像标签

<!--
src：图片地址（必选属性）
	相对地址（推荐使用），绝对地址
	../  上一级目录
alt：alt属性是<img>元素的必选属性,它给出了图像的备选文本,供图像无法显示时采用。
title：title属性是鼠标悬停在图片上显示的内容
width：宽度
height：高度
-->
<img src="path" alt="备选文本" title="悬停文字" width="300" height="300">

链接标签

<!--
href：链接地址（必选属性）
target：目标窗口位置，属性有_blank(在新网页打开)
						_self(默认，在自己网页打开)
-->
<a href="path" target="">点击我跳转到</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<a href="https://www.baidu.com">
    <img src="path" alt="备选文本" title="悬停文字" width="300" height="300">
</a>

锚链接

<!--
1.需要一个锚标记
2.跳转到标记
#
-->
<a name="top">顶部</a>
<a href="#top">点击跳转到顶部</a>

<a name="down">底部</a>
<a href="path#top">点击跨网页跳转到底部</a>

功能性标签

<!--发送邮件标签-->
<a href="mailto:1456651118@qq.com">点击联系我</a>
<!--
QQ推广等可在网页上放自己的QQ添加链接
-->

列表

<!--有序列表-->
<ol>
    <li>这是第一列</li>
    <li>这是第二列</li>
    <li>这是第三列</li>
</ol>
<!--无序列表-->
<ul>
    <li>C</li>
    <li>Java</li>
    <li>Python</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>
    
    <dd>C</dd>
    <dd>Java</dd>
    <dd>Python</dd>
    
    <dt>位置</dt>
    
    <dd>江苏</dd>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

表格

<!--表格table
行 tr rows
列 td cols
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
		<td>2-4</td>
    </tr>
    <tr>
    	<td>3-1</td>
    	<td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

媒体

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

<audio src="path" controls></audio>

iframe内联框架

<!--iframe内联框架
src：地址
w-h：宽度高度
name：标识名
-->
<iframe src="path" name="mainFrame" weight="1000px" height="1000px">
</iframe>

<a href="path" target="mainFrame">点击跳转</a>

表单

<!--form表单
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：get，post提交方式
	get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
	post，比较安全，传输大文件
-->
<form action="">
    
    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
    
    <!--单选框标签
	input type="radio"
	-->
    <p>性别：
    	<input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    
    <!--
	input type="checkbox"
	-->
    <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>
    
    <!--按钮-->
    <p>
        <input type="button" name="btn" value="点我">
        <input type="image" src="path">
    </p>
    
    
   	<!--
	submit：提交表单
	reset：清空表单所有的数据
	-->
    <p>
        <input type="submit" name="submit">
        <input type="reset" name="reset" value="清空表单">
    </p>
</form>

属性	说明
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时，指定按钮是否被选择
hidden	隐藏域
readonly	只读
disabled	禁用

下拉框

<!--下拉框，列表框-->
<p>
    下拉框：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="uk">英国</option>
        <option value="jp">日本</option>
    </select>
</p>

文本域

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

文件域

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

简单验证

<p>邮箱：
    <input type="email" name="email">
</p>
<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" max="100" min="0" step="1">
</p>

搜索

<p>
    <input type="search" name="search">
</p>

增强鼠标可用性

<!--点击label标签会跳转到对应id的文本框内-->
<label for="mark">点我</label>
<br/>
<input type="text" id="mark">

表单初级验证

属性	说明
placeholder	提示信息，用在输入框中
required	非空判断，不能为空，一般用在输入框中
pattern	用于验证，可放正则表达式