HTML与前端三丨青训营笔记

用户820818616973
32 阅读2分钟

前端与 HTML

前端工作的定义

  • 解决GUI人机交互问题
  • 跨终端
  • Web技术栈

前端技术栈拆解与分析

前端 (通过网络协议与服务器端关联)

  • HTML（内容）
  • C SS（样式）
  • JavaScript（行为）

HTML （超文本标记语言）

基本框架

html
 代码解读
复制代码
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    
    <body></body>
</html>
  • 基本框架能形成DOM树

HTML语法

标题、列表
html
 代码解读
复制代码
	<!-->标题h1-h6<-->
	<h1></h1> 
	<!-->有序列表<-->
	<ol>
    	<li></li>
	</ol>
	<!-->无序列表<-->
	<ul>
        <li></li>
	</ul>
	<!-->定义列表<-->
	<dl>
            <dt>
		<dd></dd>
            </dt>
	</dl>
图片、链接、音频、视频

  • 图片

    • src:图片链接
    • alt:图片失效后显示内容

  • 链接

    • href：网页地址
    • target="_blank" ：新窗口打开
xml
 代码解读
复制代码
     <!-->图片<-->
     <img src="" alt=""/>
 ​
     <!-->链接<-->
     <a href="" target="">网页名称</a>
     
     <!-->音视频<-->
     <audio src=""></audio>
     <video src=""></video>
输入
html
 代码解读
复制代码
<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>
选择
html
 代码解读
复制代码
<!-->多选框<-->
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>
<!-->单选框<-->
<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>
<!-->不可输入的选择<-->
<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>
<!-->可输入的选择<-->
<input list="countries" />
	<datalist id="countries">
  		<option>Greece</option>
  		<option>United Kingdom</option>
  		<option>United States</option>
	</datalist>
引用、强调
html
 代码解读
复制代码
<!-->长引用<-->
<blockquote cite="">
    <!-->cite:引用链接<-->
  <p>引用内容</p>
</blockquote>

<!-->短引用<-->
<p>段落<cite>引用内容</cite></p>

<p>段<q>双引号引用内容</q>落</p>

<p>段<code>代码内容</code>落</p>

<p>段<strong>加粗强调内容</strong>落</p>

<p>段<em>斜体语气强调</em>落</p>

HTML语义化

  • 遵循语义

    • 例：有序列表用ol，无序列表用ul；
    • lang属性表示内容所使用的语言

  • 语义化好处

    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性

HTML

HyperText Markup Language
    HyperText：超文本（图片、标题、链接、表格等）；
    Markup Language：标记语言（标签）；
    
<!doctype html>
    标记当前HTML文件使用什么样的HTML版本，浏览器据此选择渲染模式；
    
HTML语法
    标签和属性不区分大小写，推荐小写；
    空标签可以不闭合，比如input、meta；
    属性值推荐使用双引号包裹；
    某些属性值可以省略，比如required、readonly；
    
HTML语义化
    HTMl中的元素、属性及属性值都拥有某种含义；
    开发者应遵循予以来编写HTML；
        有序列表用ol；无序列表用ul；
        lang属性表示内容所使用的语言；
    
    HTML语义化可以更有利于使用HTML文件，例如：
        开发者-修改、维护页面；
        浏览器-展示页面；
        搜索引擎-提取关键词、排序；
        屏幕阅读器-给盲人读页面内容；
        
    提高代码可读性；
    提高可维护性；
    搜索引擎优化；
    提升无障碍性；
    
    实现HTML语义化：
        了解每个标签和属性的含义；
        思考什么标签最适合描述这个内容；
        不使用可视化工具生成代码；
    
HTML传递内容，而不是样式；

MDN、W3C；

个人总结

内容太多，难记忆，可以通过写代码的方式多次运用、使用可以加深印象。

对于一个内容，要提前考虑哪个标签适合它，这就得了解每个标签和属性的含义。

avatar
文章
阅读
粉丝