Web前端Day1学习笔记:关键概念与标签解析
141 浏览量
更新于2024-08-03
收藏 7KB MD 举报
"这是一份关于web前端学习的笔记,主要涵盖了HTML基础标签和属性的使用,包括文本格式化、链接、表格、列表、注释以及一些基本样式控制。"
在web前端开发中,HTML(HyperText Markup Language)是构建网页内容的基础语言,它通过各种标签来定义页面结构和样式。这份笔记详细列举了多个常见的HTML标签及其用途:
1. **文本格式化标签**:
- `<strong>`用于字体加粗。
- `<marquee>`实现字体滚动效果,通常用于创建无限循环的滚动文字。
- `<input type="text">`创建普通文本输入框。
- `<input type="password">`创建密码输入框,输入内容以星号或圆点显示。
- `<disabled>`属性用于禁用某个元素,如按钮或输入框。
2. **页面结构标签**:
- `<title>`定义页面的标题,显示在浏览器标签页上。
- `<body>`包含网页的主要内容。
- `<h1>~<h6>`定义标题等级,从一级到六级,级别越高,字体越大。
- `<br>`用于换行。
- `<hr>`插入水平线,常用于分隔内容。
- `<p>`用于创建段落。
- `<em>`和`<i>`用于斜体,`<em>`强调,`<i>`一般用于术语或引用。
- `<u>`、`<ins>`添加下划线,`<ins>`表示插入内容。
- `<sup>`和`<sub>`分别用于上标和下标。
- `<del>`划掉文字,表示删除或修订。
- `<pre>`保留预格式,内容按原样显示,不进行自动换行和缩进。
- `<span>`无语义标签,常用于CSS样式控制。
- `<div>`是一个容器标签,可以包含其他HTML元素,用于布局和组织内容。
3. **链接与导航**:
- `<a href="">`创建超链接,`href`属性指向目标URL。
- `target="_self"`或`_blank`决定链接是在当前窗口打开还是新窗口打开。
- `id`属性用于创建锚点,`<a href="#one">`结合`<div id="one">`实现内部跳转。
4. **列表**:
- `<ol>`创建有序列表,`type`属性可指定数字或字母类型,`start`指定起始值。
- `<ul>`创建无序列表,`type`可设置为`circle`、`disc`或`square`。
- `<li>`定义列表项。
5. **表格**:
- `<table>`定义表格,`<caption>`为表格添加标题。
- `<tr>`定义行,`<td>`定义单元格,`<th>`定义表头单元格。
- `border`设置表格边框宽度,`cellspacing`设置单元格间距,`cellpadding`设置单元格内边距。
- `align`属性用于居中对齐表格内容,`background`和`bgcolor`用于设置表格背景颜色。
6. **其他属性**:
- `class`定义CSS类,可重复使用,用于关联样式。
- `tabindex`设置元素的焦点顺序,影响用户使用键盘导航。
- `rowspan`和`colspan`用于合并表格单元格。
- `id`属性确保每个ID在页面中是唯一的,用于选择器定位。
这些基础知识构成了web前端开发的基础,熟练掌握它们对于创建功能丰富的网页至关重要。通过不断实践和学习,可以进一步了解CSS和JavaScript,从而实现更复杂的网页交互和动态效果。
115 浏览量
2018-01-08 上传
2021-04-04 上传
2023-03-25 上传
2022-08-08 上传
Continue_with
- 粉丝: 21
- 资源: 1
最新资源
- 俄罗斯RTSD数据集实现交通标志实时检测
- 易语言开发的文件批量改名工具使用Ex_Dui美化界面
- 爱心援助动态网页教程:前端开发实战指南
- 复旦微电子数字电路课件4章同步时序电路详解
- Dylan Manley的编程投资组合登录页面设计介绍
- Python实现H3K4me3与H3K27ac表观遗传标记域长度分析
- 易语言开源播放器项目:简易界面与强大的音频支持
- 介绍rxtx2.2全系统环境下的Java版本使用
- ZStack-CC2530 半开源协议栈使用与安装指南
- 易语言实现的八斗平台与淘宝评论采集软件开发
- Christiano响应式网站项目设计与技术特点
- QT图形框架中QGraphicRectItem的插入与缩放技术
- 组合逻辑电路深入解析与习题教程
- Vue+ECharts实现中国地图3D展示与交互功能
- MiSTer_MAME_SCRIPTS:自动下载MAME与HBMAME脚本指南
- 前端技术精髓:构建响应式盆栽展示网站