前端与HTML

用户7694813399806
112 阅读2分钟

什么是前端

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

1、前端技术栈

image.png

2、前端应该关注哪些方面

image.png

3、前端的边界

HTML——HyperText Markup Language

<h1>文章标题</h1>

  • 标签可以用来设置属性，例如 <$ima src="photo.jpg$"/>
  • 完整代码
<!doctype html>     //根标签，内容写在html中
<html>
  <head>           //页面的原数据，不需要呈现的
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>          //需要呈现的内容
    <h1>文章标题</h1>
    <p>段落内容</p>
    </body>
<html>
复制代码
  • 树形结构：HTML代码可以解析为树形结构，包括文档根节点html节点，再去划分树形结构，每个节点称为DOM节点。

Q28P`(YC0S@O{MUXM5SH7.png

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

标题h1~h6

<h1>一级</h1>
<h2>二级</h2>
<p>文章内容</p>
<h3>三级</h3>
<p>文章内容</p>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
复制代码

列表标签——有序与无序

电影排行榜

  1. 阿凡达
  2. 泰坦尼克号
  3. 复仇者联盟

电影排行榜

  • 阿凡达
  • 泰坦尼克号
  • 复仇者联盟

霸王别姬

  • 导演：

    陈凯歌

  • 主演:

    张国荣

<h2>电影排行榜</h2>
<ol>              //有序
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
<h2>电影排行榜</h2>
<ul>             //无序
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ul>
<h2>霸王别姬</h2>
<dl>            //定义列表
  <dt>导演：</dt>  //标题
  <dd>陈凯歌</dd>  //信息值
  <dt>主演:</dt>
  <dd>张国荣</dd>
复制代码

链接

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>
<a href="https://www.bytedance.com/" target="_blank">    //新窗口打开
  字节跳动官网
</a>
复制代码

多媒体链接

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"表示图片加载不出来后降级显示
  width="400"
/>图片

<audio 
  src="/assets/music.ogg"
  controls音频默认显示播放控件
></audio>声音

<video
  src="/assets/video.mp4"
  controls
></video>视频
复制代码

控件

<input placeholder="请输入用户名">      //placeholder占位符，可被替换

<input type="range">                  //input输入

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

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

<textarea>Hey</textarea>            //多行的内容
复制代码

选择

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>    //radio单选
  <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>
复制代码

引用

<blockquote cite="http://t.cn/RfjKO0F">   //blockquote快捷引用
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>    //cite短引用，作品名字

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>   //q短引用，具体引用内容

<p><code>const</code>声明创建一个只读的常量。</p>      //code代码引用

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>    //强调突出重要

<p>Cats <em>are</em> cute animals.</p>        //语气上的强调
复制代码

总结——内容划分

~4VYG%${E795OR)(UJY)`0J.png

语义化

  • HTML中的元素、属性及属性值都拥有某些含义，应遵循语义来编写HTML
  • 语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性
avatar
文章
阅读
粉丝