【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:按位与

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript