前端与HTML|青训营笔记

zaylen
567 阅读3分钟

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

1.前端

1.1 什么是前端？

前端就是使用web技术栈解决用户界面交互的职位,常见工作有：

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端小程序
    • VR/AR等

1.2 前端技术栈

  • HTML定义内容
  • css设置样式
  • JavaScript定义行为
  • 通过HTTP协议与后端服务器进行通信

1.3 前端应该关注那些方面？

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

2.HTML

2.1 html是什么？

HTML(HyperText Markup Language) 超文本标记语言, 通过一系列标签将网络上的文档格式统一，使分散的互联网资源连接成一个逻辑整体,HTML命令可以说明文字，图形，动画，表格等 一个基本的HTML文档如下：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>第一个HTML页面</h1>
    <body>
</html>
  • <html>:用于标识这是一个HTML文本,包裹完整的页面
  • <head>:是一个容器包含你想在HTML页面中但不想在HTML中显示的内容
  • <body>:包含所显示在页面中的内容
  • <h1>:一级标签，会将包含内的文字置为一级标题

2.2 HTML语法

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

2.3 常用的标签

h1~h6标签

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

image1.png

列表标签

    <!-- 有序标签 -->
    <ol>
      <li>阿凡达</li>
      <li>泰坦尼克号</li>
      <li>复仇者联盟</li>
    </ol>

    <!-- 无序标签 -->
    <ul>
      <li>🍠</li>
      <li>🌷</li>
      <li>🍓</li>
    </ul>
    
    <!-- 自定义标签 -->
    <dl>
      <dt>导演</dt>
      <dd>陈凯歌</dd>
      <dt>主演</dt>
      <dd>张国荣</dd>
      <dd>张丰毅</dd>
    </dl>

image2.png

链接标签

<!--点击跳转百度 -->
<a href="http://www.baidu.com" >百度</a>

图片标签

<img src="图片链接" alt="图片描述" />

输入input

   <input type="text" placeholder="请输入用户名">

type属性值及其描述如下：

属性值描述
button定义可点击按钮（多数情况下，用于通过javaScript启动脚本）
checkbox定义复选框
file定义输入字段和’浏览“按钮，提供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮，重置按钮会清除表单中的所有数据
submit定义提交按钮，提交按钮会把表单数据发送到服务器
text定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符
date定义输入时间

定义单选和复选框

 <!-- 通过name 属性来设置单选或复集合 -->
    <label> <input type="radio" name="sport" />足球 </label>
    <label> <input type="radio" name="sport" />篮球 </label>
    <br />
    <label> <input type="checkbox" name="food" />鸡 </label>
    <label> <input type="checkbox" name="food" />鸭 </label>

下拉框

<select name="" id="">
      <option>小黑子</option>
      <option>只因</option>
    </select>

块级引用

 <blockquote cite="原地址">test</blockquote>

短引用

<cite>test</cite>

文本格式化标签

语义标签说明
加粗<strong></strong>或者<b></b>更推荐使用<strong>标签加粗语义更强烈
倾斜<em></em>或者<i></i>更推荐使用<em>标签加粗语义更强烈
删除线<del></del>或者<s></s>更推荐使用<del>标签加粗语义更强烈
下划线<ins></ins>或者<u></u>更推荐使用<ins>标签加粗语义更强烈

2.4 内容划分

我们编写页面可以对页面内容进行划分

微信截图_20230115124043.png

2.5 语义化

html中的元素，属性，及属性值都拥有某些含义, 开发者应该遵循语义来编写HTML如：

  • 有序列表用ol,无序列表用ul

如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝