HTML学习文档（持续更新）

最新推荐文章于 2022-09-25 11:49:16 发布

小陈爱编程

最新推荐文章于 2022-09-25 11:49:16 发布

阅读量249

点赞数 1

分类专栏：学习手册 html 文章标签： html

本文链接：https://blog.csdn.net/a1578460233/article/details/117397263

版权

学习手册同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

h5(html5)+css3+web前端学习视频
帮助文档（学习手册）菜鸟教程

笔记源码—>html学习文档

已更新H5+C3新特性立即查看

可在线查看网页源代码预览

也可以ctrl+s保存打开

对比学习，一学就会！

<!DOCTYPE html>
<html lang="en">
  <!-- lang  en    是英文网站 -->
  <!-- lang  zh-CH 是中文网站 -->

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习文档</title>
  </head>
  <body>
    <!--  这是一个注释 -->
    水平线
    <hr />
    基础标签
    <h1 id="h1" >h1</h1>  <!-- 这里我加个id后面锚点链接需要 -->
    <h2>h2</h2>
    <h3>h3</h3>
    <hr>
    段落标签
    <p>段落</p>
    <hr>
    换行标签
    <br />
    <hr>
    文本格式化标签
    <b>加粗</b>
    <i>倾斜</i>
    <s>删除线</s>
    <u>下划线</u>
    <hr>
    <!-- div标签 -->
    <div>div标签</div>
    <!-- span标签 -->
    <span>span标签</span>
    <hr>
    图像标签
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="加载失败" title="这是一个图片">
    <br>
    图像标签属性：alt图像加载不出来时提示的文字----title鼠标悬停图像显示的文字
    <hr>
    路径：
    <br>
    同级目录文件a.html ---- ./a.html
    <br>
    下级目录下的文件a.html --- ./xxx/a.html
    <br>
    上级目录下的文件a.html --- ../a.html
    <hr>
    超链接标签
    <a href="http://www.baidu.com">百度</a>
    <br>
    href可以是具体地址，可以是路径，可以是#（空链接）
    <br>
    target属性指定跳转方式。_self(默认)本窗口打开，_blank在新窗口打开
    <br>
    锚点链接---target指向本页面的id
    <a href="#h1">锚点到h1</a>
    <hr>
    html特殊字符<a target="_blank" href="https://upload-images.jianshu.io/upload_images/24830130-f8edbfd90870598b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">查看</a>
    <hr>
    <!-- 表格不太常用，了解就行 -->
    table：表格区域 tr：行 td： 列
    <br>
    th也是列 通常用于表头 thead通常包裹表头 tbody通常包裹表主体 <a target="_blank" href="https://upload-images.jianshu.io/upload_images/24830130-8d7f55a06334fa8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">不太常用的属性</a>
    <br>
    <table>
     <thead><tr><th>姓名</th><th>班级</th><th>年级</th></tr></thead> 
     <tbody><tr><td>张三</td><td>一班</td><td>18级</td></tr>
      <tr><td>李四</td><td>二班</td><td>19级</td></tr></tbody> 
    </table>
    合并单元格  colspan跨列合并 rowspan跨行合并
    <hr>
   <!-- 下面必须掌握 -->
    列表标签--无序列表 ul li----有序列表 ol li----自定义列表 dl dt dd<br>
    <ul>
      <li>第一</li>
      <li>第二</li>
    </ul>
    <ol>
      <li>哈哈</li>
      <li>嘿嘿</li>
    </ol>
    <dl>
      <dt>关于我们</dt>
      <dd>一</dd>
      <dd>二</dd>
      <dd>三</dd>
    </dl>
    <hr>
    表单域from action="提交地址"  method="提交方式"<br>
    <input type="text">输入框<a target="_blank" href="https://upload-images.jianshu.io/upload_images/24830130-00c3bd622e841468.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">查看输入框属性</a>
    单元复选需要有个共同的name 默认选中属性checked <a target="_blank" href="https://upload-images.jianshu.io/upload_images/24830130-e0139a31e2b6373a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">更多属性</a>
    <br>
    用户名：<input type="text" ><br>
    密码：<input type="password" ><br>
    性别：<input type="radio" name="radio" checked  value="男" >男<input type="radio" name="radio" value="女">女
    <br>
    label标签，优化选中点击的用户体验（可能会用到）<br>
    性别：
    <input type="radio" name="radio"  value="男" id="nan" >
    <label for="nan">男</label>
    <hr>
    select下拉菜单 selected默认选择
    <select>
      <option value="请选择">--请选择--</option>
      <option selected value="男">男</option>
      <option value="女">女</option>
    </select>
    文本域 rows列 cols行
    <textarea  cols="30" rows="5"></textarea>
    <hr>
  </body>
</html>

小陈爱编程

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML学习文档（持续更新）

h5(html5)+css3+web前端学习视频帮助文档（学习手册）菜鸟教程笔记源码—>html学习文档<!DOCTYPE html><html lang="en">   <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA
复制链接

扫一扫