前端_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

相关推荐
IT_陈寒2 小时前
Python开发者必知的5大性能陷阱:90%的人都踩过的坑!
前端·人工智能·后端
codingWhat3 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
代码老中医3 小时前
2026年CSS彻底疯了:这6个新特性让我删掉了三分之一JS代码
前端
不会敲代码13 小时前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
踩着两条虫3 小时前
VTJ.PRO 双向代码转换原理揭秘
前端·vue.js·人工智能
扉川川3 小时前
OpenClaw 架构解析:一个生产级 AI Agent 是如何设计的
前端·人工智能
远山枫谷3 小时前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
codingWhat3 小时前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
HelloReader3 小时前
Tauri 应用安全从开发到发布的威胁防御指南
前端
bluceli3 小时前
WebAssembly实战指南:将高性能计算带入浏览器
前端·webassembly