HTML学习笔记

最新推荐文章于 2022-08-13 14:41:40 发布

weixin_44211964

最新推荐文章于 2022-08-13 14:41:40 发布

阅读量159

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44211964/article/details/108061872

版权

HTML 学习笔记

一. 网页基本标签

**1.标题标签 **

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

2.段落标签

<!--段落标签-->
<p>风吹落叶</p>
<p>风吹落叶</p>

3.水平线标签

<!--水平线标签-->
<hr/>

4.换行标签

<!--换行标签-->
风吹落叶<br>
风吹落叶<br>

5.字体标签样式

<!--粗体  ， 斜体-->
<h1>字体标签样式</h1>
<strong>粗体</strong>
<em>斜体</em>

6.特殊符号

<!--特殊符号-->
空格:空&nbsp;&nbsp;&nbsp;格<br/>
大于号>  : &gt;
小于号<  : &lt;
版权符号：&copy;

二. 图像标签

<img src="path" alt="text" width="x" heught="y"/>

src:图像地址

alt:图像代替文字

width:图像宽度

height:图像高度

title:鼠标悬停在图片上时事件

<img src="../resource/image/p1.jpg" alt="旅游" title="悬停文字" width="300" height="300">

三.超链接标签及应用

a标签

<!--a标签
href:必填，表示跳转到那个页面
target:表示窗口在哪里打开
     _blank  新标签打开
     _self   当前标签打开
-->
<a href="MyHTML.html" target="_blank">点击我跳转</a>

<a href="MyFirstHTML.html" target="_self">
    <img src="../resource/image/p1.jpg" alt="旅游" title="悬停文字" width="300" height="300"></a>

锚链接

<!--使用name作为标记-->
<a name="top">顶部</a>

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

功能性链接

<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:963958771@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=963958771&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:963958771:53" alt="你好" title="你好"/></a>

四.列表标签

有序列表

<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>前端</li>
    <li>C++</li>
</ol>

无序列表

<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>前端</li>
    <li>C++</li>
</ul>

自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd：列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>前端</dd>

    <dt>位置</dt>
    <dd>河北</dd>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>长沙</dd>
</dl>

五.表格标签

<!--表格table
行 tr  rows
列 td
-->

<table border="lpx">
    <tr>
        <!--colspan跨列   -->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan跨行   -->
        <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="../resource/video/testVideo.mp4" controls autoplay></video>

<audio src="../resource/audio/test.mp3" controls autoplay></audio>

七.页面结构

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

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

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

八.iframe内联框架

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

<!--iframe 内联框架
src:地址
w-h:宽度 高度
-->
<iframe src="MyHTML.html" frameborder="0"></iframe>

九. 表单

<!--表单 form
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post,get提交方式
         get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
         post :比较安全，传输大文件
-->
<form action="MyFirstHTML.html" method="get">

    <!--文本输入框 : input type="text"
     value="落叶" 默认初始值
     maxlength="8" 最长能写几个字符
     size="30"    文本框长度
    -->
    <p>名字：<input name="name" type="text" ></p>
    <!--密码框 : input type="password"   -->
    <p>密码：<input name="pass" type="password"></p>

    <!--单选框标签
    input type="radio"
    value : 单选框的值
    name  : 表示组
    -->
    <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="english" name="hobby">学英语
        <input type="checkbox" value="music" name="hobby">听音乐
    </p>

    <!--按钮
       input type="button"    普通按钮
       input type="image"     图片按钮
       input type="submit"    提交按钮
       input type="reset"     重置按钮
       -->
    <p>按钮：
        <input type="button" name="btn1" value="边长">
        <input type="image" src="../resource/image/p1.jpg">
    </p>
    
    <!--下拉框  列表框    -->
    <p>国家：
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="uk">英国</option>
            <option value="french">法国</option>
        </select>
    </p>
    
    <!--文本域
    cols="50" rows="10"
    -->
    <p>反馈
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>


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

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

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

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

    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="5">
    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
    
    <p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

十. 表单验证

placeholder 提示信息

<p>名字：<input name="name" type="text" placeholder="请输入用户名"></p>

required 非空判断

<p>名字：<input name="name" type="text" placeholder="请输入用户名" required></p>

pattern 正则表达式验证

<!--自定义邮箱-->
    <p>自定义邮箱：
        <input type="text" name="myMail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

weixin_44211964

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML 学习笔记一. 网页基本标签**1.标题标签 **<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>2.段落标签<p>两只老虎，两只老虎，</
复制链接

扫一扫