【Web前端开发】HTML基础

Web前端开发 是用来直接给用户呈现一个一个的网页,主要包含实现用户的结构(HTML)、样式(CSS)、交互(JavaScript)。然而一个软件通常是由后端和前端完成的。可以查阅文档:HTML 教程 (w3school.com.cn)

1.HTML

1.1HTML概念

HTML称为超文本标记语言

  • 超文本指:文本、声音,图片、视频、表格、链接等;
  • 标记指:由标签构成的语言。

1.2HTML结构

HTML基本结构如下:

  • html标签是整个html文件中的根标签
  • head标签是编写页面相关的属性
  • title标签是页面的标题
  • body标签是页面显示的内容

1.3HTML基本标签

  • 标题标签<h1>~<h6>:借助标题标签,能够清晰地划分出页面内容的层次关系。
  • 段落标签<p>:是将每个段落区分开来
  • 换行标签<br>:两个换行标签相当于一个段落标签
  • 加粗标签strong / b:让字体变粗
  • 倾斜标签em / i:让字体变倾斜
  • 下划线标签ins / u:字体下边有一条线
  • 删除线标签del / s:字体被删除但是还是可以显现出来

  • 超链接标签a:
  1. href属性:点击跳转某个页面链接中,#代表占位符(也表示在当前页面刷新)
  2. target属性:默认在当前页面跳转_self,如果想要在新的页面打开就用_blank

  • 图片标签img:
  1. src属性:指定图片路径,img标签必须搭配src使用
  2. alt属性:alt后面的信息表明图片加载失败后的提示信息
  3. title属性:当光标落在图片上时出现的提示信息
  4. width / height属性:修改图片大小
  5. border属性:给图片添加边框

  • 表格标签table:
  1. width / height属性:将表格中每一个小表格改成对应的width和height
  2. border属性:给表格添加边框
  3. cellspacing属性:表格中的边框默认为1px,该属性是将边框间隙进行调整
  4. align属性:将表格调至左、中、右任一位置(默认left,center,right)
  • 表格头标签thead:
  • 表格体标签tbody:
  • 表格中的行标签tr:
  • 表格中的列标签td:
  1. rowspan属性:合并行,从当前位置往下数几行合并
  2. colspan属性:合并列,从当前位置往下数几列合并

列表标签

  • 有序列表标签ol:ol -》li
  1. type属性:1(默认数字编号),a(小写英文编号),A(大写英文编号),i(小写罗马编号),I(大写罗马编号)
  2. start属性:从某个位置编号开始
  • 无序列表标签ul:ul -》li
  1. type属性:disc(默认实心圆),square(实心方块),circle(空心圆)

表单标签

  • 表单域标签form:
  1. action属性:跳转至该链接
  • 表单控件标签input:
  1. type属性:其中的submit和reset标签必须在form标签内效果才能实现
  • 相关联标签label:
  1. for属性:for搭配着input中的id属性使用,如果要让两者相关必须要id和for相同值。例:如果我想要选择男的时候点击男也可以选中,那就需要给男这个字与input-radio加上相关联
  • 下拉菜单标签select:select -》option(设置默认值时用selected属性)
  • 文本域标签textarea:
  1. cols属性:设置列的默认值
  2. rows属性:设置行的默认值

div标签:独占一行

spanbiaoqian:不独占一行

特殊符号

  1. &nbsp:空格。想要多少个空格就需要写多少遍
  2. &lt:小于号
  3. &gt:大于号
  4. &amp:按位与

相关推荐
雪碧聊技术18 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了20 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust