前端_001_html扫盲

文章目录

概念

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
复制代码
<!DOCTYPE html>

表示用的html规范

其他就是html的概念,标签属性

标签及属性

常用全局属性

每个标签都有的属性

常用标签

属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable 规定元素内容是否可编辑。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
popover 规定弹出框元素。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
title 规定有关元素的额外信息。

重点

id,class,style,title

head里常用标签

html 复制代码
1.标题<title>

2.文档字符编码  <meta charset="utf-8" />
<meta> 还能用于搜索引擎优化

3.指定文档图标
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
    
4.引入css样式
<link rel="stylesheet" href="my-css-file.css" />    

5.引入js脚本
<script src="my-js-file.js" defer ></script>    //defer属性表示该脚本会在DOM加载完后执行
6.直接写css样式
<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>    
     

总结head里常用标签

title
meta
link
style
script

body里常用标签

html 复制代码
1.标题
<h1>标题</h1>
2.段落
<p>
    
3.上标下标
<sub> <sup>    

4.链接(主要是超链接和锚点作用)
<a href>  

5.图片
<img> <map>   

6.表格
<table>    
   
7.列表
<ul>     <ol>
    
8.框架  内嵌一个html
<iframe>  
    
9.表单
<form>   <input> 
    
10.图形
<canvas>     <svg>
    
11.音频
<audio>    
    
12.视频
<video>    

表情符号

&# + 数字

https://www.w3ccoo.com/charsets/ref_emoji.asp

url编码

url传输只能传ASCII编码,因此需要进行编解码后再进行传输

参考:

[HTML 基础 - 学习 Web 开发 \| MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)(https://www.cainiaojc.com/tags/ref-byfunc.html)

https://www.w3school.com.cn/html/index.asp

相关推荐
梨想橙汁1 分钟前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
梨想橙汁7 分钟前
ES6+ 必用新特性:箭头函数、解构、模板字符串、扩展运算符
前端·javascript
梨想橙汁8 分钟前
DOM 与 JS 事件:页面元素操作、事件冒泡、事件委托实战
前端·javascript
Dreams°12324 分钟前
【React+TS+ECharts可视化避坑:图表空白、不实时更新、数据池堆积卡顿完整复盘(附完整源码)】
前端·react.js·echarts
计算机魔术师26 分钟前
三年前估值45亿,现在129亿——Hugging Face凭什么被老黄盯上?
前端
一个游离的指针27 分钟前
浏览器的渲染原理
前端·javascript
zttbee33 分钟前
vue2的API大白话讲解
前端·vue.js·前端框架
几何心凉1 小时前
ToDesk/向日葵/UU远程,谁才是真正的“口袋里的办公室”
前端
亿元程序员1 小时前
一个人,4个岗位,20天:我用Cursor+Codex上线了一款微信小游戏
前端
LabVIEW开发1 小时前
将自定义 DLL 与 INI 文件部署到 LabVIEW 实时目标
前端·labview·labview知识·labview功能·labview程序