前端学习笔记 | HTML

最新推荐文章于 2024-08-15 18:19:19 发布

老师好我叫林同学

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量38

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/weixin_64176495/article/details/132042289

版权

⭐语法

双标签、单标签：

html、head、body

	<html> 根标签
		<head>
 			<title>这里必写title标签</title>
        </head>
              
        <body>
            键盘敲烂，月薪过万
            ...
        </body>
	</html>

HTML开头解析🤏

<!DOCTYPE html>声明是HTML5
<html lang="en">告诉浏览器这个页面的语言，en英文，zh-CN中文
<meta charset="UTF-8">，"UTF-8"为万国码，尽量写成标准的 “UTF-8”

⭐常用标签

内容标签

标题标签<h1></h1>，h1-h6
段落标签<p></p>
换行break<br/>
文本格式化 <u>下划线</u>，<i>斜体</i>，<b>粗体</b>，<s>删除线</s>

<div>和<span>⭐

<div>这是头部</div>，一行只能有一个大盒子
<span>一个块</span>，一行可以有多个盒子

图像标签**<img src="图像URL"/>**⭐

注：宽度和高度只要修改一个就行，另一个等比例缩放；

属性	属性值	说明
src（source）	图片路径	必需
title	提示文本	鼠标移到图片显示
alt	替换文本	图片显示不出来的时候，用文字替换
width	像素	宽度
height	像素	高度
border	像素	图像边框粗细，边距

链接标签<a href="URL">⭐

示例：<a href="URL" taget="xx" >百度搜索</a>

属性作用
href URL（必需属性）
target 标签打开方式：_self默认 , _blank新窗口

属性	作用
href	URL（必需属性）
target	标签打开方式：_self默认 , _blank新窗口

表格标签（显示数据）<table></table>⭐

   			<table align="center" border="1" cellpadding="5" cellspacing="0.3">
                   <!-- tr行单元格 -->
                   <tr>
                       <!-- th表头，会加粗 -->
                       <th colspan="4">个人简历</th>
                       <!-- td单元格,rowspan行合并，colspan列合并 -->
                       <td rowspan="3">照片</td>
                   </tr>
                   <tr>
                       <td>姓名：</td>
                       <td>林同学</td>
                       <td>性别：</td>
                       <td>女</td>
                   </tr>
   			</table>

列表标签（用来布局）ul / ol / dl⭐

           <!-- 无序列表unorder -->
               <ul>
                   <li>新闻</li>
                   <li>阅读</li>
               </ul>
               <!-- 有序列表order -->
               <ol>
                   <li>新闻</li>
                   <li>阅读</li>
               </ol>
               <!-- 定义列表definition -->
               <dl>
                   <dt>高清显示</dt><!--dt定义项目名字-->
                   <dd>产品支持高分辨率显示。</dd><!--dd描述项目-->
               </dl>

表单标签（收集信息）<form></form>

表单域<form></form>

包含表单元素的区域
表单元素
- input输入<input type="属性值"/>
  - type属性
  - 其他属性（name和value是必须的，同一组单选或同一组复选，其name必须一样）
  - label标签🤏：为input定义标注
- select下拉选择<select></select>
- textarea文本域<textarea></textarea>
  - 支持多行文本输入，常用于留言板/评论

嵌入框架iframe<iframe></iframe>⭐

属性：src=“URL/文档”

✅ HTML5 特性

语义化标签

如 <header>（网页头部），<nav>（导航栏），<article>（文章），<section>（区块），<footer>（网页底部）等
浏览器支持
多媒体标签
Canvas 画布
❌ 内联 SVG
本地存储
localStorage
sessionStorage
❌ Web SQL
Web Workers
应用缓存（Cache Manifest）
无障碍