前端和HTML的简介

zhoutuanyu
95 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天

前端的简介

前端的结构

  1. HTML设置内容 ，CSS设置样式 ，Javascript设置行为
  2. 通过网络协议与服务器交互
  3. HTML（HyperText Markup Language）

前端应该关注

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 用户体验

HTML的主要形式

标题

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

加粗字体从小到大字体变小，一个HTML文档只能有一个h1标签

q.png

列表

  1. 有序列表：
<ol>a</ol>
<ol>b</ol>
<ol>c</ol>
  1. a
  2. b
  3. c
  1. 无序列表：
<ul>a</ul>
<ul>b</ul>
<ul>c</ul>
  • a
  • b
  • c
  1. 属性列表：
<dl><dt>导演</dt>
    <dd>陈凯歌</dd>
    <dt>主演</dt>
    <dd>张国荣</dd>
    <dd>李四</dd>
</dl>

导演

陈凯歌

主演

张国荣
李四

链接

    <a href="https://www.bytedance.com/">
                 字节跳动官网
    <a href="https://www.bytedance.com/"
            target="_blank">
                 字节跳动官网

target=“_blank”表示重新创建一个新的。 “字节跳动官网”这几个文字点击就可以进入href属性里的链接

图片

<img 
     src="https:...../obj/edem-cm/inqmijnnuho/movable_type.jpg"(地址）
     alt="Metal movable type" (替代性文本：图片加载失败显示文字）
     width="400"（宽度）
/>

音频

<audio
      src="/assets/video.mp4"（地址来源）
      controls(默认显示播放按钮）
></audeo>

视频

<vidio
      src="/assets/video.mp4"（地址来源）
      controls(默认显示播放按钮）
></video>

输入

<input placeholder="请输入用户名">（输入方框里输入名字）
<input type="range"》（范围）
<input type="number" min="1" max="10">（输入数字，最小1最大10）
<input type="date" min="2018-02-10">（输入日期格式，最小日期是2018-02-10）
<textarea>Hey</textarea>（给个文本框用户填写内容）

type格式按照属性规范，number只能数字，data只能日期之类的。

选项

<p>
   <lable><input type="checkbox" />A</lable>                            
   <lable><input type="checkbox" checked />B</lable>
</p>
<p>
   <lable><input trpe="radio" name="sport" />ball</label>（
</p>
<p>
    <select>
            <option>梨子</option>
            <option>苹果</option>
            <option>香蕉</option>
     </select>
</p>

（checkbox是给一个打勾的方框）

A[] B[✔]

（radio属性是只能选一个，name属性相同的从里面选一个）

（select选项下拉选择 option 是选项）

引用

<blockquote cite="http://t.cn/...>
         <p>....</p> 快捷引用,cite属性(作品名字或者章节）引用文字来自哪
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>.(作品名字或者章节，小王子属于作品名字）
</p>
<q>...</q>(内容>
<code>代码
<pre><code>
......
</pre></coe>多行代码
<strong>非常重要
<em> 语气强调

怎么开发HTML

需要知道HTML中元素，属性和属性值都有什么含义

开发者应该遵循语义来编写HTML：1.有序列表用ol,无序用ul 2.lang属性表示内容所使用的语言

HTML使用：1.开发者-修改维护页面 2.浏览器-展示 3.搜索引擎-提取关键词，排序索引 4.屏幕阅读器-给盲人阅读页面内容。

语义化的好处：1.代码可读性 2.可维护性 3.搜索引擎优化 4.提升无障碍 HTML是传达内容而不是样式

怎么做到语义化： 1. 了解每个标签和属性的含义 2.思考什么标签最合适描述内容 3.不使用可视化工具生成代码

结尾

对于HTML语言，很多标签不需要全部背下来，掌握热门标签然后了解其他冷门标签，需要用的时候可以查资料搜索。同时我们编写HTML有固定的格式需要了解撞我，我们的编写目的是为了网页的更好呈现服务用户。

avatar
文章
阅读
粉丝