前端与HTML ｜ 青训营笔记

用户9534627805481
68 阅读2分钟

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

本堂课重点内容

  • 介绍了前端的定义

  • HTML的定义和完整结构

  • HTML常用的标签e.g 标题，列表，链接，多媒体插入，选择，引用

前端

什么是前端：

使用web技术栈解决多端图形用户界面交互问题

  • 解决GUI人机交互问题

  • 跨终端 eg.PC/移动浏览器，客户端/小程序，VR/AR

  • Web技术栈

前端技术栈

   javaSciprt：行为-e.g按下一个按钮后 如何反应
   css：页面样式-大小，颜色，位置
   html：页面，结构，内容

前端技术栈.JPG

前端关注点

    功能，美观，无障碍，安全，性能（速度，动画流畅，用户体验），兼容

HTML

什么是HTML:

HyperText Markup Language

HyperText-图片,标题,链接,表格
Markup Language- <开始标签> XX </结束标签>

完整HTML例子

<head>页面的原数据，不呈现给用户
<body>呈现给用户的东西

标题

标题有h1-h6, h1字体最大, 在一个HTML文档里面只能有一个h1标签。 使用方法如下

列表

有序列表(ol/li)

用<ol>标签来表示 <ol>:order list 
每个列表项用<li>标签来表示，<li>:list item
默认用数字123排序

无序列表(ul/li)

用<ul>标签来表示 <ul>:unorder list 
每个列表项用<li>标签来表示，<li>:list item
每个列表项前有小黑点.

定义列表(dl/dt/dd)

<dl>:definition list
<dt>:definition title 
<dd>:definition description 具体描述
多对多的关系

链接

链接用<a>标签标示
属性href：跳转地址
属性target：target="_blank" 新窗口打开

插入多媒体

[代码片段](https://code.juejin.cn/pen/7124318077751132168)

属性介绍

src：图片来源地址
alt: 替代性文本，当多媒体无法展示时出现的文字
controls：显示播放控件，用于audio，video

输入

1.input标签

placeholder：默认显示文字
range：滑动块
number数字
date日期

2.textarea标签

选择

type=“checkbox”，选择多个
type=“radio”，选择一个，相同name属性里只能选择一个
<select>下拉选择，选项写在<option>
list自由输入，<option>里是快捷自动填充

引用

<blockquote>快捷引用
<cite>短引用，表示名字&章节等，文字成斜体
<q>短引用，引用内容，双引号
<code>可长应用也可短引用
<pre><code>多行代码引用,不加pre则代码在同一行
<stong>表示严重紧急，粗体
<em>语调上的强调，斜体

页面内容划分

页面内容划分.JPG

header页头，里面可放logo，nav导航
main 主要内容，包含article文章
aside 附属内容
footer页尾，参考信息，版权，备案

谁在使用HTML

  • 开发者：修改维护页面

  • 浏览器：展示页面

  • 搜索引擎：提取关键词，排序

  • 屏幕阅读器：阅读页面内容

课后总结

本节重点讲了HTML的各种标签的使用，多练习 熟悉且达到语义化

avatar
文章
阅读
粉丝