HTML总结笔记

HTML总结

学习来源：https://www.bilibili.com/video/BV1x4411V75C?p=11&vd_source=c406cec6bb9d5441fcb8903f9c8242d5

基本标签

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


<title>基本标签</title>

<p>两只老虎，两只老虎，</p>     //段落标签
<br/>                       //换行
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<hr>                        //水平分割线
&nbsp;                      //空格
&gt;                        //大于号（>）
&lt;                        //小于号（<）
&copy;                      //©

超链接

<a href="1.html" target="_blank">点我跳转到页面一</a>                  //target="_blank" 相当于跳转到新网页，而旧网页不变
<a href="https://www.cnblogs.com/fqqyblog/" target="_self">点我跳转到fqqy的博客</a>    //target="_self"   相当于跳转到新网页，而旧网页关闭
//href中的地址既可以是网址也可以是本地文件

图片

 <img src="../resource/image/1.jpg" alt="图片" title="悬停文字" width="300" height="300">

//alt指的是图片加载不出来时显示的内容，title是悬停文字

锚链接

<a name="top">top</a>
<a href="#top">回到顶部</a>

//先在一处定义a标签的name,再在另一处的a标签通过#加上name为地址，可实现跳转

列表

<ol>
  <li>java</li>
  <li>python</li>
  <li>c</li>
</ol>                               //有序列表

<hr>

<ul>
  <li>java</li>
  <li>python</li>
  <li>c</li>      
</ul>                              //无序列表

<hr>

<dl>
  <dt>学科</dt>
  <dd>语文</dd>
  <dd>数学</dd>
  <dd>英语</dd>
</dl>                             //自定义列表

表格

<table border="1px">                //表格以table标签开始
  <tr>                              //<tr>代表一行
	<td colspan="3">                //<td>代表一列，colspan的值代表当前列占几列
  	学生成绩
	</td>
  </tr>
  <tr >
	<td rowspan="2">                //rowspan的值代表当前行占几行
  	狂神
	</td>
    <td>
      语文
    </td>
    <td>
      100
    </td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">秦疆</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>

媒体（视频、音频）

<video src="../resource/video/F149A9D49B791AEAA2270B75F2F1AC9A.mp4" controls autoplay height="500" ></video>  //视频

<audio src="../resource/audio/20230507_202918.m4a" controls autoplay></audio> //音频

页面框架

<body>

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

<section><h2>部分</h2></section>

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


</body>

iframe内联框架

<iframe src="5.html" name="hello" frameborder="0" width="500" height="500"></iframe>

//在一个网页里面嵌套另一个网页

表单

<form action="1.html" method="get">   //表单==》form标签    action为表单提交后跳转的网页     
    
  <p>名字：<input type="text" name="username" value="123" maxlength="8" size="30" readonly></p>        //纯文本框
  <p>密码：<input type="password" name="pwd" value="123456" hidden></p>                                //密码框

    <p>
        性别：
        <input type="radio" value="boy" name="sex" checked disabled>男                                //单选
        <input type="radio" value="girl" name="sex">女
    </p>

    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉                                        //多选
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

    <p>
        <input type="button" name="btn1" value="点我变长">                                            //按钮
        <input type="image" src="../resource/image/1.jpg" width="300" height="300">                 //图片
    </p>

    <p>
        国家：
        <select name="列表清单" >                                                                    //下拉框
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="uk" selected>英国</option>
        </select>
    </p>

    <p>
        邮箱：
        <input type="email" name="email" placeholder="请输入邮箱" required>
    </p>
    <p>
        url:
        <input type="url" name="url">
    </p>
    <p>
        商品数量：
        <input type="number" name="num" max="100" min="0" step="2">
    </p>
    <p>
        音量:
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>
    <p>
        反馈：
        <textarea name="textarea"  cols="30" rows="10">文本</textarea>
    </p>
    <p>
        搜索：
        <input type="search" name="search">
    </p>

    <p>
        <input type="file" name="files">
        <input type="button"value="上传" name="upload">
    </p>

    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


  <p>
    <input type="submit">
    <input type="reset" value="清空表单">
  </p>
<!--正则表达式pattern
<input type="text" name="diymail" pattern="">
其中pattern要上网搜索查询
-->


</form>
posted @   风起气飏  阅读(7)  评论(0)  编辑  收藏  举报
相关博文：
· Markdown语法简易说明
· 常用Dos命令
· HTML的基本结构
· HTML总结
· HTML学习笔记
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示