前端与HTML

前端与HTML

前端最基础的技术栈：JavaScript（行为）、CSS（样式）、HTML（内容）

前端应该关注：功能、美观、安全、无障碍、性能、兼容性
前端的范畴：node-js——服务器端的应用 、electron—— 客户端 ...前端发展很快，持续学习，才能跟上发展。

HTML：HyperText Markup Language 超文本标记语言

Hyper： 图片、标题、链接、表格
Markup Language：<h1>文本标题</h1>

标签浅记

1.<img src="photo.jpg" />：src:属性名 photo.jpg:属性值
2.<!doctype html> :浏览器使用哪种渲染模式
3.<html></html> :文档的根标签
4.浏览器拿到代码后会解析成一个dom树(树形结构)，每个节点称为dom节点，包含文档根节点。
5.不区分大小写，推荐小写，属性值推荐双引号包裹，空标签可以不闭合，比如input、meta。
6.标题：h1~h6 浏览器内置标签简单展示样式
7.列表：

  • 1.有序列表：<ol><li><li><li><ol>　　
  • 2.无序列表：<ul><li><li><li><ul>　　
  • 3.属性名、 属性值多对多有缩进(p-value):<dt><dd><dd><dd><dt>　　

dt:definition term　　dd:definition description

8.链接：<a href="http://www.baidu.com/ target="_blank"></a>

a:anchor锚　
href：Hypertext Reference 超文本引用
target：新窗口打开

9.alt="" : 默认不加载多媒体时，替代性文本
10.controls ： 浏览器默认播放控件
11.表单类输入标签： <input placehollder="请输入用户名">：文本占位符

  • 1.type="range" 范围 滑动块
  • 2.type="number" min="9" max="20" 数字可增加范围
  • 3.type="date" mim="2001-12-06"
  • 4.<textare>Hey</textare> :多行输入
  • 5.<selsct><option></option></selsct>

selsct:下拉选择 option:哪些选择

  • 6.下拉选项 有部分提示 可以自己输入新的
    <datalist id="countries">
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>

12.文本类标签

  • 1.<blockquote cite="http:/baidu.com"><p>引用的内容</p></blockquote>快捷引用
  • 2.<p>我最喜的书<cite>小王子</cite><q>小王子智慧</q></p> cite引用作品名字或章节 会斜体 q引用具体引用的内容
  • 3.<p><code>短代码</code></p> <pre><code>长代码</code></pre>code采用等宽字体
  • 4.strong侧重严重紧急 em更多语气的强调

13.布局划分

  • 1.header 表头
  • 2.nav 导航
  • 3.main 主体
  • 4.aside 内容相关 侧边广告 热点推荐等
  • 5.article 内容
  • 6.footer 页尾 参考链接版权等

语义化

HTML中的元素、属性及属性值都拥有某些含义，注意规范使用正确的标签
为团队提供可读性可维护性 为搜索引擎优化 以及有助于优化无障碍性
HTML传达的是内容 而不是样式
推荐多看mdn文档 w3c里HTML的规范

posted @ 2022-01-15 23:59  取鱼  阅读(54)  评论(0)    收藏  举报