HTML基础学习

咖啡，巫师与猫

已于 2022-06-23 16:39:36 修改

阅读量181

点赞数

分类专栏：前端开发基础知识学习笔记文章标签： html 学习前端

于 2022-06-23 16:36:19 首次发布

本文链接：https://blog.youkuaiyun.com/zysp158/article/details/125394594

版权

前端开发基础知识学习笔记专栏收录该内容

7 篇文章

订阅专栏

HTML入门知识

html骨架标签

在vscode中使用"! + Tab"键生成html骨架

html(根标签) - 除DOCTYPE外的其他内容都要写在html标签内
head(页面头部) - 页面中非常重要但是又不会显示出来的代码写在此处，例如: css、js
title(页面标题) - 显示在浏览器标题栏
body(页面主体) - 需要显示在浏览器中的内容都写在此处

<!-- 告诉浏览器使用解析html5的方式来解析当前文件 -->
<!DOCTYPE html>
 <!-- 向浏览器表明当前为哪种语言网页 -->
<html lang="en">
<head>
    <!-- 设置页面字符集 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个html文件</title>
</head>
<body>
    Hello World
</body>
</html>

html常用标签

标题标签

标题标签能将文字加粗加黑显示
标题标签一共有6个，h1~h6, h1是一级标题，最大;h6是六级标题，最小
标题标签会独占一行
align:
align是标题的重要属性，能够决定标题中文字的显示位置
align=“left”，文字居左（默认)
align=“center”，文字居中
align=“right”，文字居右

<h1 align="center"> H1标签，标题居中显示标题 </h1>
    <h3>H3标签，显示标题</h3>
    <h3>H3标签，显示标题</h3>

水平线和换行

<hr>或<hr />是水平线标签
html文档中无法使用回车进行换行, 要进行换行就必须使用<br>或<br />标签

段落标签

p标签叫做段落标签( paragraph 的首字母），用来将文章分段落展示的
p标签也会独占一行
p标签中也有align属性，用来控制文字显示的位置，默认值是left

html实体

在html文档中空格至多只能使用一次，要使用更多空格必须使用html实体
 :代表一个空格
&emsp;:代表一个全角空格(  :一个半角空格)
<:代表<
>:代表>

非常用实体

截图来自慕课网

div和span标签

div标签主要是用来对网页进行布局的( div+css )
span标签通常用来将文本的一部分独立出来，从而对独立出来的内容设置单独的样式
div标签一行只能放一个div(目前)
span在一行内可以放置多个

字符格式化标签

作用:让字符显示效果不同，突出字符的特殊地位

图片标签

img标签:用来在页面中引入图片
src属性︰设置图片的路径（相对路径和绝对路径均可)
alt属性︰如果图片因为某种原因未能引入，则显示alt指定的字符串
width\height属性:用来设置图片的宽高
注意点:通常只需要设置width或者height其中之一即可
设置一个，另一个会等比例扩大或者缩小

链接标签

a标签又叫做链接标签
超链接︰从一个页面跳转到另一个页面
<a href= “http://www.baidu.com” target=“_self” >百度</a>
href:指定跳转的页面的地址
target:指定新连接的打开方式
_blank在新窗口中打开超链接;
_self在当前窗口打开新连接(默认);
锚链接:从页面的一个位置跳转到另一个位置
制作锚点两步骤︰
第一步:使用a标签设置锚链接
<a href=“#info”>个人信息</a> (设置锚链接)
第二步︰在要跳转的标签上设置锚点
<p id=“info”>个人信息</p> (设置锚点)

表格标签

核心标签:

table用来制作表格的外边框
table中嵌套tr用来制作表格的行
tr 中嵌套 td用来制作表格的单元格（也叫列)
主要属性:
border:表格边框
width/height:表格宽高、tr/td也能使用
cellspacing:单元格与单元格、单元格与边框的间隙
cellpadding:单元格中内容与单元格的间隙
align:设置表格在页面中的位置;设置tr/td中文字对齐方式
bgcolor:设置表格、tr、td的背景色
colspan: 用于行合并，在td标签中使用
rowspan: 用于列合并，在td标签中使用
表格结构标签:
caption:表格标题
thead:表格头部
th:表头(居中、加粗、加黑)
tbody:表格主体
tfoot:表格脚部

列表与表单标签

列表标签:

有序列表由ol和li组成
无序列表由ul和li标签组成
自定义列表由dl、dt和dd三种标签组成
表单标签:
input标签属性

name属性用来将单选框/复选框限制成为一组
复选框的name必须是数组形式，所以需要使用[] (hobby[])
文件域能够让表单具有文件上传能力
multiple 属性∶允许同时选中多个文件
<input type=“file” multiple=“multiple”/>
隐藏域:不显示在页面上，但是表单提交时又会被提交到action指定位置的域
<input type=“hidden” value=“102” name=“rid”/>
select标签
下拉菜单由select和option两个标签嵌套组合而成

<select name="addr">
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="sz">深圳</option>
</select>

textarea标签

文本域也叫做多行文本框
多行文本框就是能在该文本框中写入大量的文字信息
<textarea name= “sign” ></textarea>
<textarea cols=“20” rows=“10”></textarea>
cols=“20”:文本域的列数
rows=“10”:文本域的行数
其他属性:

其他type属性值:

<!-- 属性值案例 -->
<input 
    type="email" 
    required="required" 
    pattern="\w{2,}@\w{2,}.(com|net) >

<input type="number" value="3" min="0" max="100" step="5">

<input type="url" />

<input type="search" >

<input type="range" value="10" min="0" max="100" step="20" />

<input type="color">

日期选择器:

年-月-日 ：<input  type="date" ><br>
时：分 ：<input  type="time" ><br>
年-月-日 时：分：<input  type="datetime-local" ><br>
年-月： <input  type="month" ><br>
年-周： <input  type="week" ><br>