提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

从头学前端-HTML简介

HTML前端 简介 从头
2023-06-13 09:13:56 时间

HTML简介:

  • 先说下什么是网页：网页是网站中的页面，通长是HTML格式的文件，单个或多个页面就组成了一个网站；现在的技术发展到一般都是单页应用，在一个页面中，通过页面跳转的方式，访问不同数据页面；

网页基本都是通过浏览器访问；网页主要有图片，文字、链接、视音频等元素组成；使用不同的标签引入元素；最终生成的文件和展示的方式一般都是html或htm文件;

  • 什么是HTMLHTML是超文本标记语言《Hyper Text Markup Language》，不是一个编程语言，只是个标记语言，用来描述网页结构；

超文本意思超越了文本的限制，除了文本，还可以加图片，动画，多媒体等内容；

  • 一个网站的诞生： 编写html文件 多个html展示不同页面 用户通过浏览器访问html文件 浏览器渲染html文件展示成web页面；
  • web标准 Web标准是W3C标准化组织制定的一系列标准的集合； 主要由结构（tag标签），表现（css样式）、行为（JavaScript用户交互）构成； * web标准使得代码更规范，统一；

HTML标签

  • 标签一般都是成对出现的，并且都在'<>'里面；如<html></html>；也有例外，如单标签'br',数量不多
  • 标签关系有两类：
> 包含关系：父子关系，包含关系可以多层包含;
> 并列关系：兄弟关系

<html>

<head></head>
<body>
	<h1></h1>
	<div></div>
</body>

</html>

  • 4个基本结构标签（也叫骨架标签）： 
*  html  : 根标签,所有代码都在<html lang="zh-CN"></html>之内
*  head： 文档的头部标签，在里面定义字符集<meta charset="UTF-8">
*  title:  文档的标题标签，在head标签里面
*  body： 文档的主体，页面展示的内容都在body里面
  • 文档标签<! DOCTYPE html>： * <! DOCTYPE> 是文档类型的声明标签，用于告诉浏览器已什么版本显示网页；
  • HTML常用标签`- 表格标签 table：``` 1. 表格主要是显示数据，不是用来布局页面的； 2. 基本语法：<table><tr><td></td></tr></table> table是表格，tr是行，td是单元格 3. 表头标签：<table><tr><th></th></tr></table> 表头中的文字会加粗，居中; 4. 合并单元格： rowspan：跨行合并, colspan:跨列合并； 5. 表格属性：如图 ```![在这里插入图片描述](https://img-blog.csdnimg.cn/1e2e854aadc5472eb89a45d79c05785d.png) - 列表标签: 主要是用来布局，整洁，整齐； 根据场景不同可分为三大类，有序列表，无序列表和自定义列表 \* 无序列表ul： ``` 1. 基本语法： <ul><li>列表项</li><li>列表项2</li></ul> 2. 基本规范： ul只可以放li标签，li标签对内容无限制，相当于容器，可以容纳所有元素 ``` \* 有序列表ol: 列表排序以数字显示，其他与无序列表一致 \* 自定义列表dl：经常用于对术语和名称进行解释和描述； ``` 3. 基本语法： <dl><dt><dd></dd></dt></dl> 4. 基本规范：dl只能包含dt和dd标签， ``` - 表单标签： 表单的主要目的是为了收集用户信息，与用户交互的； \* 表单的组成： 一个完整的表单通常有表单域，表单控件（元素），提示信息等‘’ ``` 表单域是一个包含表单元素的区域，主要使用form标签定义; 表单元素是允许用户输入或选择的内容控件；主要有input,, select,textarea等表单元素 <input type="属性类型" name="属性名" value="值" > 表单中lable标签为input元素定义标注，用于绑定表单元素，浏览器会自动聚焦到指定元素; <lable for="name">用户名</lable> <input type="text" id="name"/>
  • 标题标签 <h1> ~ <h6> 作为标题使用，文字变粗，独占一行；
  • 段落标签：<p> 将html文档分割成多段，段落之间保有空隙
  • 换行标签：单标签 强制文字换行；行之间没有空隙
  • 文本格式化标签： 加粗<strong>或<b> 倾斜<em>或<i> 删除线<del>或<s> 下划线<ins>或<u>
  • 盒子标签： <div>和<span>;没有语义，用来装内容；div是division的缩写，span表示跨度，跨距； div是大盒子，单独占一行，span是小盒子可以多个在一行显示；
  • 图像标签：<img>标签用于定义页面中的图片，是一个单标签； <img src="" alt="",title="" width="" height="" bolder>undefinedsrc是img标签的属性，用于指定图片路径(相对路径或绝对路径)或链接；alt是文本替换，title是提示文本。width和height是图片宽度个高度，单位是像素，修改宽度，高度会等比缩放；反之亦然； border是图片边框;
  • 超链接标签：<a>（anchor 锚点） 作用是从一个页面链接到另一个页面；分为：外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接(通过id定位)等 <a href="目标地址" target="打开方式\_self、\_blank、 ">文本或图像 </a>；
  • 注释标签： <!-- --> 注释里面的内容不会显示的页面，只会在源代码显示；
  • 特殊字符： 如下图； 
select是下拉列表：语法规范如下
<select>
      <option selected>未选择</option> #至少包含一对选项
      <option>选项1</option>
      <option>选项2</option>
</select>
textarea数文本域标签，定义多行文本，在输入内容较多的情况下使用。
语法规范如下：
<textareacols="10" rows="10">默认值 </textarea>
在这里插入图片描述
在这里插入图片描述

相关文章