HTML

<!-- !DOCTYPE：使用的规范-->	
	<html>所有</html>
	<mate>描述标签
	<title>标题</title>
	<head>头部</head>
	<body>主体</body>
	<h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <p>换行标签</p>
    <br>换行
    <hr>水平线标签
    <strong>粗体</strong>
    <em>斜体</em>
    <!--特殊符号-->
    空格 &nbsp;
    大于 &gt;
    小于 &lt;
    版权 &copy;

图像

jpg gif png bmp

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

alt：未找到显示

相对地址：…/resources/image/1.jpg

上一级目录 …/

超链接

<a href="path" target="目标窗口位置">连接标签或者文本</a>

可以嵌套图片

target：网页在哪打开

_blank 新标签
_self 跳转

锚链接：页面间的跳转

使用name标记
href="#top"
href=“页面#top”

功能性链接：

邮件链接：href=“mailto:[email protected]”
QQ链接：联系我

列表

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>C++</li>
    <li>Python</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>C++</li>
    <li>Python</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>C++</dd>
    <dd>Python</dd>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>武汉</dd>
</dl>

表格

<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

行 tr

列 td

音频&视频

<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/video/1.mp3" controls></audio>

页面结构分析

header：标记头部区域内容

footer：标记脚部区域内容

section：Web页面中的一块独立区域

article：独立文章内容

aside：相关内容或应用

nav：导航类辅助内容

内联框架

<iframe src="path" name="mainFrame"></iframe>

<iframe src="" name="hello"></iframe>
<a href="https://www.baidu.com" target="hello">给iframe添加地址</a>

表单

<form method="post" ation="result.html">
    <p>名字：<input name="name" type="text" value="s8532950"></p>
    <p>密码：<input name="pass" type="password"></p>
    <p>
        <label for="mark">点击：</label>
        <input id="mark" type="text">
    </p>
    <p>单选:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex" checked>女
    </p>
    <p>多选:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="comp" name="hobby">编程
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="cheat" name="hobby" checked>聊天
    </p>
    <p>按钮:
        <input type="button" value="点击" name="btn1">
    </p>
    <p>下拉框:
        <select name="列表名称" value="国家">
            <option value="value">中国</option>
            <option value="value">美国</option>
            <option value="value">俄国</option>
            <option value="value" selected>印度</option>
        </select>
    </p>
    <p>文本域
        <textarea name="textarea" cols="20" rows="3">文本内容</textarea>
    </p>
    <p>文件域
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>邮箱验证
        <input type="email" name="email">
    </p>
    <p>URL验证
        <input type="url" name="url">
    </p>
    <p>数字验证
        <input type="number" name="number" max=100 min=0 step=10>
    </p>
    <p>滑块
        <input type="range">
    </p>
    <p>搜索
        <input type="search">
    </p>
    <p>
        <input name="Button" type="submit" value="提交">
        <input name="Reset" type="reset" value="重填">
    </p>
</form>

method：提交方式 get|post

get方式提交：可以看到提交的信息高效

post方式提交：看不到提交的信息可以传输大文件

radio中name要一样（同一个组）

元素

type：指定元素的类型 text password checkbox radio submit reset file hidden image button 默认为text
name：指定表单元素名称
value：元素的初始值当type为radio时必须有
size：表单元素的初始宽度 text password字符为单位其他像素
maxlength type为text或password时输入的最大字符数
checked type为radio或checkbox时指定按钮是否被选中
hidden 隐藏
readonly 只读
disabled 禁用
placeholder 提示信息
required 元素不能为空
pattern 正则表达式 www.jb51.net/tools/regexsc.htm

【傲霜凌雪丶】HTML笔记

HTML

标签

图像

超链接

列表

表格

音频&视频

页面结构分析

内联框架

表单

元素

猜你喜欢