HTML笔记

HTML：超文本标记语言，用来描述网页

    web标准：结构，样式，行为相分离

    标签关系：包含关系 or 并列关系

    标签语义：根据标签的语义，在合适的地方给合理的标签，让页面结构更清晰

基本结构标签（骨架标签）：

    <html></html>    根标签

    <head></head>  文档头部，必须设置title标签

    <title></title>       文档标题

    <body></body>   文档主体

   < !DOCTYPE>：文档类型声明，它不是html标签，位于文档最前面

    lang：语言类种，en为英，zh-CN为中文，这个属性对浏览器和搜索引擎有作用

    charset：字符集（character set），方便计算机识别和存储各种文字，通过<meta/>标签的charset属性来规定。其中UTF-8为万国码。不写？会引起乱码

 

常用标签(1)

     <h1>~<h6>：标题标签，强调重要，字体加粗。块级元素

    <p>：段落，p和p之间保有空隙

    <br />：换行，换行的行与行之间没有空隙。单标签

    <div></div>：用来布局，division（分区）。div和span无语义，就是个盒子，装内容用。块级元素

    <span></span>：同布局，span（跨度）。行内元素

 

特殊字符

为避免特殊字符被识别为代码，需要转义，常用几个↓

    空格符  &nbsp;

    大于号  &gt;

    小于号  &lt;

<!--  --> ：注释 快捷键ctrl + /

文本格式化标签 

优先使用语义明确的

    加粗  <strong></strong> 或 <b></b>

    倾斜  <em></em> 或 <i></i>

    删除线 <del></del> 或 <s></s>

   下划线  <ins></ins> 或 <u></u>

常用标签(2)

    图像标签 <img /> 引入图片

        1. src是必须属性，指定图像文件的路径

        2. alt 属性，替换文本（图片不能显示时）

        3. title属性，提示文本（鼠标放在图像上）

        4.width 和 height 属性，宽和高，一般调整其中一个，另一个会等比例缩放

        5. border 边框

        属性采取键值对格式，属性不分先后，用空格隔开。

    相对路径  图片相对于HTML页面的位置

        同一级

        下一级  /

        上一级  ../

    绝对路径 从盘符开始的路径或网络地址

        \ 斜杠方向不同

 

    超链接 <a> </a> 跳转页面

        1.href是必须属性，指定链接目标的url地址，外部链接以http开头

        2.target 属性，指定链接

        内部链接：网站内部页面之间的相互链接

        空链接：#

        href里为文件或压缩包，则会下载

        网页元素链接：网页中的各种元素都可以添加超链接

        锚点链接：通过唯一id建立链接，可实现跳转

 

    表格标签<table></table> 展示数据

        基础语法：<table>  >  <tr>  >  <td>  (表格 > 行 > 单元格，包含关系)

        表头语法：<tr>  >  <th> (th形成表头的单元格，加粗居中，在第一行)

     表格结构标签：

        <thead></thead>表格头部，必须有<tr>

        <tbody></tbody>，表格主体

     table的属性：

        1. align 对齐方式，值：left，center，right

        2. border 边框，默认0

        3.cellpadding 单元格边沿与内容的空白，默认1px

        4. cellspacing 单元格之间的空白，默认2px

        5. width 表格宽度，单位：像素 或 百分比

     合并单元格：

        跨行合并：rowspan="合并单元格的个数"

        跨行合并：colsspan="合并单元格的个数"

     目标单元格（写合并代码）

        跨行：最靠上

        跨列：最靠左

      注意：合并完删除多余的单元格

    列表标签 <ul>、<ol>、<dl> 布局

        无序列表 <ul>  >  <li> 

        <ul>  >  <p>     <li>  >  <p>√

        有序列表 <ol>  >  <li>

        自定义列表 <dl>  >  <dt> + <dd>

        dl包含dt和dd，dt名词，dd名词解释，名词解释可以有若干个

　　表单标签 收集用户信息

     表单域 <form> </form> 包含表单元素的区域，属性：

        1. action 属性，指定接收数据的url

        2. method 属性，提交方式，get  /  post

        3. name 属性，表单的名称

    表单控件（表单元素）

    表单元素⑴  <input />  收集用户信息，该标签的属性type决定字段的形式，type的值：

        text  文本

        password  密码

        radio  单选按钮

        checkbox  复选框

        submit  提交按钮

        reset  重置

        button  按钮

        file  文件域（上传文件）

　　css3新增的input类型：

　　number  限制输入类型必须是数字型

　　tel  手机号码

　　search  搜索框

    <input>其他属性

        1. name 属性，定义<input>元素的名称，单/复选框的name值要一样

        2. value 属性，规定<input>元素的值，文本框会显示这个值，单/复选框则将value值提供后台

        3. checked 属性，默认勾选（单/复选框）

        4. maxlength 属性，规定输入字段长度

　　 5. required 属性，规定该表单必填 ，不能为空

　　 6. placeholder 属性，提示信息

　　 7. autofocus 属性，自动聚焦到指定表单

　　 8. autocomplete 属性，值 off 或 on，默认打开，键入记录

　　 9. multiple 属性，可多选文件提交

  <label> 标签 用于绑定一个表单元素，需该标签的for属性与相关元素的id属性相同

　　表单元素⑵ <select></select> 下拉列表 节约空间  语法：

    <select>

        <option>选项1</option>

        <option>选项n</option>

    </select>

    在<option>中定义selected = "selected"，则默认勾选此项

　　表单元素⑶ <textarea></textarea> 文本域框 定义多行文本输入，文本域尽量在一行，否则文本域框内有空格

Emmet语法 

　　快速生成HTML结构语法，语法：

  • 父子级  >
  • 兄弟级  +
  • 自增符  $
  • 标签内容  { }

 

H5新增语义化标签

  • <header></header>  头部
  • <nav></nav>  导航
  • <article></article>  内容（文章）
  • <section></section>  区域
  • <aside></aside>  侧边栏
  • <footer></footer>  尾部

说明：以上标签在一个页面文档中可以多次使用；针对搜索引擎；移动端常用

 

视频标签

　　<video></video>

　　说明：视频使用mp4格式兼容性较好

video常用属性 值 说明
autoplay autoplay 自动播放，谷歌需要加muted属性才能自动播放
controls controls 显示播放控件
width 单位px 视频的宽
height 单位px 视频的高
loop loop 是否循环播放
preload

auto

none

 是否预加载，有autoplay属性时则忽略
src url 视频地址
poster Imgurl 画面图片
muted muted 静音播放

 

 

音频标签

　　<audio></audio>

　　说明：音频使用mp3兼容性较好

audio常见属性 值 说明
autoplay autoplay 自动播放，谷歌禁
controls controls 显示播放控件
loop loop 循环播放
src url 视频地址

 

posted @   X4  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS笔记
·  HTML知识总结
·  HTML-常用标签
·  前端学习——HTML
·  【HTML】HTML笔记
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae