html学习及常见标签_网页载荷栏-CSDN博客

本文链接：https://blog.csdn.net/weibinwps/article/details/123051366

学习路径

初识html

html5+CSS3+js

W3C标准万维网联盟 www.w3.org www.chinaw3c.org

结构化标准语言 html xml

表现标准语言 CSS

行为标准 DOM ECMAScript

常见IDE

webstorm

网页基本标签

注释

基本结构

<!DOCTYPE html>
<!--doctype 告诉浏览器使用什么规范,默认html-->
<html lang="en">
<head>
<!--    头部-->
    <meta charset="UTF-8">
    <meta name="keywords" content="关键字">
    <meta name="description" content="网页描述">
<!--    描述网站信息,一般用做SE0 -->
    <title>这是标题</title>
<!--    网页标题-->
</head>
<body>
<!--主体-->
hello,world!

<!--标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<!--段落标签-->
<p>段落标签</p>
p*3 按tab
<!--换行标签-->
<br/>换行标签,自闭合标签
<!--水平线标签-->
<hr/>水平线
粗体,斜体
<h1>字体样式标签</h1>
粗体: <strong>粗体</strong>
斜体: <em>斜体</em>
<!--特殊符号-->
空格 &nbsp;
<br>
版权符号:&copy;weibinwps
    行内元素和块元素
    在一行的成为行内元素,
    单独一行的成为块元素
</body>
</html>

P标签

align=center 居中

div标签

align=“center” 居中

span标签

图像

<img 
     src="/resources/img/pic/12.jpg" 
     alt="12.jpg别名,未加载出来图片时显示文字,便于排错" 
     title="悬停文字,鼠标放上会显示" 
     width="897" height="1344"
     >

//
<img      
     src="upload/1.jpg"      
     width="460" height="346"      
     style="cursor:pointer;"      
     onclick="javascript:window.open(this.src,'_blank','');"     
     onerror="errimg(this,'/nodata.jpg');"      
     >

超链接

<a href="3.html#down">回到3.html的底部</a>
<p>链接标签</p>
href 目的地址
target:在哪里打开窗口,_blank 新标签,默认在自己中打开_self
<a href="http://www.baidu.com" target="_blank" >百度</a> <br>
<a href="http://www.163.com"> <img src="/resources/img/meinv1/13.jpg" alt="a链接" height="172" width="77"></a><br>
锚链接,需要一个标记,页面内跳转
<a href="" name="top"></a>
<a href="#top">回到顶部</a>
<br>
功能性链接
    邮件链接 mailto
<a href="mailto:weibinwps@163.com">点击联系我</a>
    qq链接 qq推广-推广工具--复制代码

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

列表

有序列表
<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
</ol>
<hr>
无序列表
应用范围 导航,侧边栏
<ul>
    <li>java</li>
    <li>python</li>
    <li>C</li>
</ul>

自定义列表 网站底部
dl:标签
dt:列表名称
dd:列表内容
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
</dl>

表格

基本结构
<ol>
<li>行 tr</li>
<li>列 td</li>
<li>跨列 colspan="4"</li>
<li>跨行 rowspan="4"</li>
</ol>
<table border="1px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>
//td
 white-space: nowrap;自适应宽度
colspan 合并单元格

媒体

音频和视频
<ul>
    <li>src 资源路径</li>
    <li>controls 控制开关</li>
    <li>autoplay 自动播放</li>
</ul>
<video src="/resources/video/游泳.mp4" controls>张佳乐游泳</video>
<br>
音频
<audio src="/resources/music/S.H.E%20-%20十面埋伏.flac" controls autoplay>十面埋伏</audio>
//音频没有自动播放.为了避免用户在打开网页时产生噪音，各浏览器都禁用了这个功能，无法在不交互的情况下自动播放音乐；

网页布局

header 标题头

footer 标记脚部区域

<div id="footer">
    <a href="#top">回到顶部</a>&nbsp;&nbsp;
    <!--    需要顶部有个锚点<a href="" name="top"></a>-->
    <a href="mailto:weibinwps@163.com">邮件联系我</a>&nbsp;&nbsp;
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1963486766&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1963486766:51" alt="QQ联系我" title="QQ联系我"/></a>
    <br>
    <p align="center">&copy;weibinwps</p>
    <a name="down"></a>
</div>

section 页面中一块独立的区域

article 独立的文字内容

aside 侧边栏

nav 导航类辅助内容

<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
    </section>
<footer>
    <h2>脚部区域</h2>
</footer>
</body>

样式

style中

overflow:auto; 允许滚动条

手机页面自适应

网页宽度自动适应手机屏幕宽度的方法（转）

在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style=“width:100%”，整个页面在设备上看起来就是全屏的了。

移动端手机网站限制input只能输入数字

用input:tel属性解决，如果还得限制粘贴，双击保存的内容填充内容时候的数值变化，可以用

document.getElementsByTagName(‘body’)[0].addEventListener(‘click’,function(e){

…dosomething…

},false);

不过只是在手机上能不能输入除数字以外的的字符，但是在pc端还是得用js来限制

iframe内联框架

<body>
<!--<iframe src="http://www.163.com" frameborder="0" width="300px" height="300px"></iframe>-->
<iframe src="" frameborder="0" name="hello" width="500px" height="500px"></iframe>
<a href="1.html" target="hello">点击跳转</a>
</body>

表单及表单应用


<form action="1.html" method="get">
    <h1>注册</h1>
    表单form
    action 提交的位置
    method post或者get
    get 明文携带参数,高效,不能传输大文件
    post 安全,传输大文件
    <p>名字: <input type="text" name="username"/></p>
    <p>密码: <input type="password" name="pwd"/></p>
   <p>
<!--       提交-->
       <input type="submit">
<!--       重置-->
       <input type="reset">
   </p>
    <p>查看传输信息:浏览器--检查--网络--页面点提交--获得的网页--载荷--传输的用户名和密码</p>
    <h2>表单元素格式</h2>
    <h3>文本框</h3>
    <input type="text" value="" maxlength="" size="" placeholder="请输入用户名" required>
            type="text" 类型
            value="" 初始值
            maxlength="" 输入文本的最大长度
            size="" 表单的大小长度
            placeholder="" 提示信息
            readonly 表单只读
            required 非空判断

   <h3>密码框</h3>
    hidden 隐藏
    <input type="password" name="pwd" id="pwd" value="123" hidden>
    <h3>单选框</h3>
    加disable属性,禁用
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
    <h3>多选框</h3>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="eat" name="hobby">吃饭
    <h3>按钮</h3>
    <p>
        按钮: <input type="button" name="btn1" value="点击按钮"><br>
        图片<input type="image" src="/resources/img/meinv1/14.jpg" width="300px" height="300px"><br>
        提交<input type="submit">
        重置 <input type="reset">
    </p>
    <h3>下拉框</h3>
    <p>国家下拉框:
        <select name="列表名称" id="select">
            <option value="china">中国</option>
            <option value="hanguo">韩国</option>
            <option value="chaoxian" selected>朝鲜</option>
            <option value="usa">美国</option>
        </select>
    </p>
    <h3>文本域</h3>
    <p>反馈:
        cols行 row列
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    </p>
    <h3>文件域</h3>
    <p>
        <input type="file">
        <input type="button" value="上传" name="upload">
    </p>
</form>

<form action="2.html" method="get">
    <h3>表单验证</h3>
    <p>
        邮箱:
        <input type="email" name="email">
        URL:
        <input type="url">
        数字: setp步长,按一下增长数字
        商品数量<input type="number" max="10" min="0" step="4">
        滑块:
        音量<input type="range" max="100" min="0">
        搜索:
        <input type="search">
    </p>
</form>

表单初级验证

placeholder="" 提示信息
required 非空判断
<form action="3.html" method="get">
    <h2>表单验证</h2>
    <p>
        pattern正则表达式
        脚本之家快速查询https://www.jb51.net/tools/regexsc.htm
        自定义邮箱验证:
        <input type="text" name="diyemail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
    <input type="submit">
</form>

html总结


# 表单初级验证

```html
placeholder="" 提示信息
required 非空判断
<form action="3.html" method="get">
    <h2>表单验证</h2>
    <p>
        pattern正则表达式
        脚本之家快速查询https://www.jb51.net/tools/regexsc.htm
        自定义邮箱验证:
        <input type="text" name="diyemail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
    <input type="submit">
</form>