前端知识总结（一）HTML

最新推荐文章于 2023-12-29 07:44:28 发布

Youky_

最新推荐文章于 2023-12-29 07:44:28 发布

阅读量258

点赞数

分类专栏：前端文章标签： html html5 前端

本文链接：https://blog.csdn.net/qq_43882506/article/details/107359964

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简介

HTML全称是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，用来描述网页。

目前最新的HTML版本是H5，要了解它和之前版本的不同，可以看我之前的这篇：

Youky：【翻译整理】What's new in HTML5zhuanlan.zhihu.com

因为HTML是标记语言，所以无需运行环境，直接用浏览器打开文件即可看到预期结果

HTML的注释格式是：<! >

1. <form action = "">：表单类型的标签有很多，最外层都要有一个form标签，意义是将内部的标签定义为同一个表单，这样才可以使用提交/重置按钮，action属性定义了用来处理输入数据的脚本的服务器页面。因此，下面的表单元素在没有form标签时实际也是可以使用的

2. 输入框：

<input type=”text|password”/>

type=text时为文本框
type=password时为密码框，即无法看到输入的内容

3. 文本域：

<textarea rows="行数" cols="列数">文字</textarea>

文字会出现在文本编辑区内作为提示性文本

4. 按钮：<input type=”submit|reset ” value=”按钮要显示的文字”/>

submit表示提交按钮
reset表示重置按钮

5. 单选框和复选框:

<input type=”radio|checkbox” value=” ” name=” ” checked=” ”/>

radio表示单选框，checkbox表示复选框
单选的name值要相同,复选的可以不同
若某一个选项中checked=”checked”,则该项为默认选项
value为选择框会传回后端的值，因此要为每个选项设置不同value值

<label for = "id" >：与单选框和复选框一起使用，for属性的值取为表单中某个选项的值，则点击label中文字的时候会选中这个选项。

6. 下拉列表

<select>
    <option selected="selected"></option>
    <option ></option>
    <option disabled></option>
<select>

selected="selected"的那一项为默认选择且显示

添加了disabled的那一项无法选中

超链接

<a href=""  target="">文字或图片</a>

href属性表示跳转到的地址，有三种情况：

网址
本地目录
#，表示无效的超链接。在后期要为此处添加链接时，前期可以先使用#作为占位

target属性表示打开该地址的方式，取值为_blank时会在新的页面中打开超链接。默认在当前页面打开

图片

<img src="图片路径" alt=”文字”/>

图片的路径可以是本地目录也可以是网址，当图片找不到时会显示alt中的文字

功能性标签

<head>：头部元素的容器

<link rel="stylesheet" href="css路径">：引入CSS样式文件

<style>：在页面中书写内嵌样式

<script>：引入JS脚本文件，或是书写内嵌JS脚本

script标签可以放在head标签中，也可放在body标签中。推荐放在body标签中，这样可以避免进行DOM操作时页面尚未渲染的问题
默认情况下，解析script标签时其他内容的解析将停止
在script标签中有 defer属性时，页面完成解析后脚本才开始解析
在script标签中有aysnc属性时，脚本与页面同时解析，但脚本解析完后将执行

<title>：定义网页标题

<meta>：提供有关页面的元信息（meta-information）

常用的有下面这些：

<meta charset="utf-8">：指明了编码方式
<meta name="keywords" content=" "/>：content内容是向搜索引擎提供的关键字
<meta name="description" content=" "/>：content内容是告诉搜索引擎网站的主要内容（被搜索时会显示）
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
viewport参数含义：
  width：宽度（数值 / device-width）（默认为980 像素）
  height：高度（数值 / device-height）
  initial-scale：初始的缩放比例 （范围从>0 到10）
  minimum-scale：允许用户缩放到的最小比例
  maximum-scale：允许用户缩放到的最大比例
  user-scalable：用户是否可以手动缩 (no,yes)

<base href="基本url ">：网页中其他地址将从给出的基本url下寻找相对url

其他

元素嵌套规则

前面已经说过，元素分为块级元素（block）和行内元素（inline），在元素嵌套中：

块级元素可以包含行内元素，但不一定能包含块级元素（如p，h标签内部不能包含块级元素）
行内元素一般不能包含块级元素。a元素内部可以嵌套块级元素，因为在检查嵌套关系时会自动跳过a标签

src和herf的区别

src是source的缩写，表示引用资源替换当前内容
herf是Hypertext Reference的缩写，表示超文本引用，用于在当前文档和引用资源之间建立联系
浏览器解析到src时会停止其他资源的处理，直接将该资源处理完毕，而对herf不会

标签自闭和

通常，一个标签的尖括号内最后一个字符为斜杠 /

但根据最新的HTML5规定，形如<img>、<br>、<hr>这样的标签，标签内部是没有内容的（对于img标签，图片是属性而不是内容），在以前版本的HTML中，img标签是这样写的<img/>，但现在不需要了，写为<img>足矣。

以上

Youky_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端知识总结（一）HTML

简介HTML全称是超文本标记语言 (HyperTextMarkupLanguage)，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，用来描述网页。目前最新的HTML版本是H5，要了解它和之前版本的不同，可以看我之前的这篇：Youky：【翻译整理】What's new in HTML5zhuanlan.zhihu.com因为HTML是标记语言，所以无需运行环境，直接用浏览器打开文件即可看到预期结果HTML的注释格式是：<! >标签按照不同的分...
复制链接

扫一扫