1. 前端应该关注哪些方面

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

2.HTML

HyperText Markup Language 超文本标记语言

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

标题

• h1-h6不同标题大小，样式内置

- 列表

• 有序列表 会自动生成数字序号

        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
        <li>第四条</li>
   </ol>

代码运行结果如下： `

1. 第一条
2. 第二条
3. 第三条
4. 第四条

`

• 无序列表 会在开头自动生成点

    <ul>
        <li>其中一个</li>
        <li>其中一个</li>
        <li>其中一个</li>
        <li>其中一个</li>
   </ul>

代码运行结果如下： `

• 第一条
• 第二条
• 第三条
• 第四条

`

• 属性名与属性值列表 会自动生成缩进

    <dl>
        <dt>导演：</dt>
            <dd>导演名字</dd>
        <dt>演员：</dt>
        <dd>演员名</dd>
        <dd>演员名</dd>
        <dd>演员名</dd>
   </dl>

代码运行结果如下： `

导演：

导演名字

演员：

演员名

演员名

演员名

`

• 链接

   <a href="http://www.baidu.com">
   <img scr=" " alt=" "  width="400">3图片
   #alt可以表示加载失败时的默认显示
   <audio acr="相对地址" controls></audio>#音频
   <video scr="相对地址" controls></video>#视频

• 输入

<inputplaveholder = "请输入用户名">#输入框
<input type="range">#输入范围
<input type="number" min="1" max="10">#指定范围数字
<input type="date" min="2018-02-10">#日期选择
<textarea>Hey</textarea>#多行文本

1. 多选题

<label><input type="checkbox"/>西瓜</label>
<label><input type="checkbox"/>菠萝</label>

代码运行结果如下： `

西瓜 菠萝 `

2. 两个变量名称相同则只可同时选择一个

<p>
    <label><inpur type="radio" name="sports">足球</label>
     <label><inpur type="radio" name="sports">篮球</label>
</p>
   

代码运行结果如下： `

足球 篮球

`

3. 多选择中选择一个

<p>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
</p>

• 引用

strong和em均可以表示强调，strong表示内容重要，em表示语气强调

• 内容划分

基础页面框架如下图：

传达内容，而不是样式