9q13nh 发表于 2024-6-29 13:28:46

2022前端知识整理：1、HTML+CSS基本


    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>HTML+CSS<span style="color: black;">基本</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2022前端知识整理：<span style="color: black;">重点</span><span style="color: black;">包括</span>HTML<span style="color: black;">基本</span>和CSS<span style="color: black;">基本</span>部分，学完之后能够搭出一个简单的前端静态页面。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1、web标准的<span style="color: black;">形成</span>：</h3><span style="color: black;">形成</span>语言说明结构HTML页面元素表现CSS页面样式<span style="color: black;">行径</span>JavaScript页面交互<h3 style="color: black; text-align: left; margin-bottom: 10px;">2、HTML</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（Hyper Text Markup Language）中文译为：超文本标记语言</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3、VS code</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">必须</span>安装的插件</p>Auto Rename TagChinese (Simplified) (简体中文) Language Pack for Visual Studio Codecode settings syncError LensESLintGitLens — Git superchargedJSON to TSLive ServerOne Dark ProPrettier ESLintSettings SyncTypeScript Vue Plugin (Volar)Vue Language Features (Volar)Vue VSCode SnippetsVueHelperVeturVue 3 Snippets<h3 style="color: black; text-align: left; margin-bottom: 10px;">4、HTML<span style="color: black;">基本</span></h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">排版标签</h3>标题标签 h1 h2 h3 h4 h5 h6段落标签 p换行标签 br水平线标签 hr<h3 style="color: black; text-align: left; margin-bottom: 10px;">文本格式化标签</h3>b，strong 加粗u，ins 下划线i，em 倾斜s，del 删除线<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">媒介</span>标签</h3>img，{src，alt，title，weight，height} <span style="color: black;">照片</span>../，./ 路径audio，{src，controls} 音频video，{src，controls} 视频<h3 style="color: black; text-align: left; margin-bottom: 10px;">链接标签</h3>a，{herf，target，title，weight，height} 超链接<h3 style="color: black; text-align: left; margin-bottom: 10px;">列表标签</h3>ul，li <span style="color: black;">没</span>序列表ol，li 有序列表dl，dt，dd 自定义列表<h3 style="color: black; text-align: left; margin-bottom: 10px;">表格标签</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table 表格整体tr 表格每行td 表格<span style="color: black;">每一个</span>单元格border，width，height 表格属性 caption 表格<span style="color: black;">外边</span>大标题</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> th 表格<span style="color: black;">第1</span>行的小标题</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> thead，tobody，tfoot 表格结构标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> rowspan，colspan 跨行合并，跨列合并</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">表单标签</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">input，{text，password，radio，checkbox，file，submit，reset，button} 输入框，<span style="color: black;">选取</span>框，按钮button，{submit，reset，button} 按钮td 表格<span style="color: black;">每一个</span>单元格select，{selected，option} 下拉菜单 textarea，{cols，rows} 文本域</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> label <span style="color: black;">运用</span>label标签将表单内容包裹起来</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">语义化标签</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">没</span>语意的布局标签：<span style="color: black;">实质</span>的<span style="color: black;">功效</span><span style="color: black;">必须</span><span style="color: black;">研发</span>者自己定义</p>div <span style="color: black;">独霸</span>一行span 一行多个<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有语义的的布局标签：header头部，nav导航，footer底部，aside侧边栏，section区块，article<span style="color: black;">文案</span></p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">字符实体</h3>&amp;nbsp 空格&amp;gt 大于&amp;lt <span style="color: black;">少于</span>&amp;amp 和&amp;quot 双引号&amp;apos 单引号<h3 style="color: black; text-align: left; margin-bottom: 10px;">5、CSS<span style="color: black;">基本</span></h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">CSS引入方式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内嵌式、外联式、行内式</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">基本</span><span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">选取</span>器 p{}，类<span style="color: black;">选取</span>器 .class{}，id <span style="color: black;">选取</span>器 #value{}，通配符<span style="color: black;">选取</span>器 *{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">class类名<span style="color: black;">能够</span>重复，一个标签<span style="color: black;">能够</span><span style="color: black;">同期</span>有多个class类名；id属性值不可重复，一个标签只能有一个id属性值</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">字体和文本样式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 字体样式：字体<span style="color: black;">体积</span>：font-size，字体粗细：font-weight，字体样式：font-style，字体类型：font-family，字体类型：font属性连写</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">文本样式：文本缩进：text-indent，文本水平对齐：text-align，文本修饰：text-decoration，行高：line-height</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">chorme调试<span style="color: black;">工具</span>（略）</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">颜色取值</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> rgb<span style="color: black;">暗示</span>法 rgb ( 255 , 255 , 255 ) ：白色</p> rgba<span style="color: black;">暗示</span>法




流星的美 发表于 2024-8-24 16:23:36

“NB”（牛×的缩写，表示叹为观止）‌

b1gc8v 发表于 2024-10-4 03:21:16

楼主节操掉了，还不快捡起来！

qzmjef 发表于 2024-10-19 17:34:35

i免费外链发布平台 http://www.fok120.com/

1fy07h 发表于 2024-10-31 03:50:14

认真阅读了楼主的帖子，非常有益。
页: [1]
查看完整版本: 2022前端知识整理：1、HTML+CSS基本