第二节课《前端与 HTML》课程笔记

微冷991
77 阅读2分钟

前端

解决

GUI人机交互

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

html

hypertest Markup language

超文本 图片标题链接表格

标记 <>

<!doctype html>   决定渲染模式
<html> 根标签
	<head></head> 标题与编码
	<body></body> 
</html>

浏览器解析代码为dom树，网页右键检查，查看dom树节点

image-20230727223122782.png

编码建议

image-20230727223202125.png

常用控件

浏览器默认标题样式 h1-h6

有序列表<ol><li></li></ol>，前面会加1、2、3

无序列表<ul><li></li></ul>，前面会有小黑点

定义列表<dl><dt>标题</dt><dd>内容</dd></dl> dl可有多个dt，dt可有多个dd

链接<a></a>, href(hyper refence)指定跳转的网址， target="_blank"在新标签中打开

图片<img />, src表示图片地址，alt(替代性文本，无法加载图片时展示的文字)=“Metal movabel type”

音频<audio></audio>,src, controls显示浏览器相关空间

视频<video></video>同音频

输入<input></input>placehosder(默认显示文本)、type(range、number(min,max)、date(min(2018-02-10))、checkbox(多选)、radio(单选，name表示分组)）、list（后方加入datalist,datalist嵌套option表示可选项，不限制其他自定义选项）

多行输入框<textarea></textarea>

下拉选择 <select><option></option></select>

长引用<blockquote></blockquote>, cite指定引用内容来源

短引用<cite></cite>或者<q></q>

代码引用<pre><code></code></pre> pre可用使得引用变成多行

强调标签<strong></strong>、<em></em>，前者强调事物、后者强调语气

内容划分与语义化

常见结构

image-20230727225336158.png

image-20230727225633940.png

image-20230727230520377.png

看mdn文档Web 开发技术 | MDN (mozilla.org)

总结

HTML语言是一种用于构建网页的标记语言，具有易读易写、易于维护、易于扩展等特点。在使用HTML编写网页时，需要注意以下几个方面：

  1. GUI人机交互：应该关注用户体验，设计友好的界面和交互方式，使得网页易于使用和理解。
  2. 内容划分与语义化：应该合理地将网页内容划分为不同的段落、标题、列表、表格等，同时使用语义化的标签，使得网页结构清晰、易于维护和扩展。
  3. 编码建议：应该遵守统一的编码规范和标准，使用语义化的标签和属性，正确使用特殊字符和元素样式，以提高网页的可读性和可维护性。
  4. 常用控件：HTML中提供了多种控件，如输入框、下拉框、多选框、单选框、按钮、图片、音频、视频等，应该根据需要选择合适的控件，提供用户友好的操作界面。
  5. 内容展示：HTML中提供了多个标签用于展示内容，如段落、标题、列表、表格、引用等，应该根据需要选择合适的标签，使得网页内容结构清晰、易于理解。

在编写HTML网页时，应该尽量避免使用不符合标准和语义的标签和属性，同时保持良好的代码风格和结构，以提高网页的可读性和可维护性。

avatar
文章
阅读
粉丝