html基础知识总结

浅浅时光～～

已于 2024-08-16 10:46:13 修改

阅读量846

点赞数 16

文章标签： html

于 2024-08-16 10:43:14 首次发布

本文链接：https://blog.csdn.net/weixin_47511748/article/details/141239175

版权

1、HTML简介

html是一种客户端浏览器解析语言，其后缀是.html。

HTML语言是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落

表单等信息。

解析HTML网页常用的浏览器：谷歌(Chrome)、firefox、Edge

开发工具: VSCode、WebStrom、HBuilder

2、HTML网页语法结构

<!--H5页面标识-->
<!DOCTYPE html>
<!--HTML网页的结构-->
<html>
  <!--头信息文件（报文信息）-->
  <head>
    <!--指定页面字符集：UTF-8> GBK > ISO-8895-1 -->
    <meta charset="utf-8">
    <!--网页的标题-->
    <title></title>
  </head>
  <!--主体部分 Body中的内容都是能在浏览器中显示-->
  <body>
    Hello HTML网页！！！
  </body>
</html>

注意点：

HTML语言不区分大小写
meta标签提供关于HTML文档的元数据，元数据不会显示在页面上，但对于浏览器是可读的。

3、HTML常用标签

3.1.标题标签

H1~H6（块级标签，独占一行）

<h1>标题标签：h1~h6（块级标签，独占一行）</h1>

3.2. 段落标签

p标签（块级标签，独占一行）

<p>段落标签（块级标签，独占一行）</p>

3.3.图片标签

img标签（行标签，不独占一行）（单标签）

<!--
		图片标签的属性：
		src：图片地址（路径，必须）
		alt：图片的替代文字（可选）
		title：鼠标悬停的提示文字（可选）
		路径：
			相对路径：./(当前)，../（上级目录）
			绝对路径
		-->
<img src="img/2003122.jpg" alt="" title="">

3.4. 超链接标签

a标签（行标签，不独占一行）

<!--
    a超链接标签
    href:跳转路径
  	target：指定跳转页面的打开方式：_self（默认方式，当前页打开）、_blank（在新窗口打开）
-->
<a href="http://www.baidu.com">百度一下</a>

3.5.序列标签

1. 无序标签

<!--type属性指定序号方式，默认desc(实心圆) 属性值有：desc（实心圆）、circle（空心圆）、square（方块）-->
<ul type="circle">
    <li>JAVA</li>
	<li>VUE</li>
    <li>SpringBoot</li>
    <li>SpringcloudAlibaba</li>
</ul>

2.有序标签

<!--有序序列（ol）通过type属性指定序号
    type：1（数字）、I/i(大小写罗马数字)、A/a（大小写字母）-->
<ol type="1">
    <li>JAVA</li>
    <li>VUE</li>
    <li>SpringBoot</li>
	<li>SpringcloudAlibaba</li>
</ol>

注:不管是无序(ul) 还是有序 (ol) 标签中只能包含<li></li>标签，不允许写入其他标签或内容。

3.自定义标签

4.<dl>自定义描述标签，与<dt>和<dd>标签配合使用

<dl>
    <dt>后端</dt>
	<dd>java</dd>
	<dd>Spring</dd>
	<dd>SpringMVC</dd>
	<dd>SpringBoot</dd>
	<dd>前端</dd>
	<dd>Js</dd>
	<dd>ES6</dd>
	<dd>Vue</dd>
	<dd>Node.js</dd>
</dl>

3.6.文本标签

在网页中，有时候要为文字设置粗体、斜体、下划线等效果，就需要用到HTML中的格式化标签。

<!--粗体标签strong、b-->
<strong>文本格式化标签</strong>
<br>
<!--斜体标签em、i-->
<em>文本格式化标签</em>
<br>
<!--下划线标签ins、u-->
<ins>文本格式化标签</ins>
<br>
<!--删除线标签标签del、s-->
<del>文本格式化标签</del>

3.7.表格标签

表格主要用于列表数据的展示

基本语法：

<table></table>：定义表格
<tr></tr>：定义表格的行，必须嵌套在<table>标签中
<td></td>：定义表格的列，必须嵌套在<tr>标签中
<th></th>：表格标题标签，必须嵌套在<tr>标签中

表格的属性：

border：边框属性
cellspacing：设置单元格之间的间距，默认2px
cellpadding：设置内容与单元格边框的间距
width：设置表格的宽度，单位可以是像素或百分比，在响应式布局中推荐使用百分比单位
height：设置表格的高度

<table border="1" cellpadding="10" cellspacing="0" width="500px" height="400px">
	<!-- 表格第一行: 标题-->
	<tr>
		<th>第一列</th>
		<th>第二列</th>
		<th>第三列</th>
		<th>第四列</th>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
		<td>第二行第三列</td>
		<td rowspan="2">第二行第四列(跨行合并)</td>
	</tr>
	<tr>
		<td>第三行第一列</td>
		<td colspan="2">第三行第二列(跨列合并)</td>
	</tr>
	<tr>
		<td>第四行第一列</td>
		<td>第四行第二列</td>
		<td>第四行第三列</td>
		<td>第四行第四列</td>
	</tr>
</table>

合并单元格

跨行合并（上下合并）：rowspan="合并单元格个数"，并且删除被合并的单元格
跨列合并（左右合并）：colspan="合并单元格格式”，并且删除被合并的单元格

合并操作小结：

首先确定跨行还是跨列
找到目标单元格，跨行取上面单元格为目标单元格（rowspan=""），跨列取左边为目标单元格（colspan=""）
删除被合并的单元格

3.8.form表单

form表单是一个包含表单元素的区域，使用form标签定义表单，在进行请求操作时form标签会将表单范围内的表单元素信息提交给服务端。

<form action="提交到服务器的URL地址" method="请求方式(get/post)" name="名称" id="唯一标识">
</form>

表单元素：

表单元素使用<input>标签来定义

<input type="属性值">

注意：

input标签为单标签
type属性设置不同属性值来指定标签类型

type属性值	描述
text	文本框、输入框
password	密码框
radio	单选按钮
checkbox	复选框
file	文件上传
button	普通按钮
submit	提交按钮
select	下拉框
textarea	文本域

<form action="" method="get">
	<label>输入框：</label>
	<!--autocompLete: 是否记录输入框输入的信息，默认值： on，off关闭
	    placeholder：表单提示信息
	    required：非空约束
        autofocus: 自动聚焦属性，页面加载完成自动聚焦
	-->
	<input type="text" name="usename" id="usename" 
	    autocomplete="off" placeholder="请输入" required="required" autofocus/>
	<br>
	<label>密码框：</label>
	<input type="password" name="pwd" id="pwd">
	<br>
	<labe1>单选框:</labe1>
	<!--radio的name属性值必须相同，才能实现单选
		checked="checked"表示默认选中状态
		简写形式：checked
	-->
	<input type="radio" name="sex" value="男" />男
	<input type="radio" name="sex" value="女" checked="checked"/>女
	<br />
	<label>复选框：</label>
	<input type="checkbox" name="hobby" value="吃饭" checked="checked"/>吃饭
	<input type="checkbox" name="hobby" value="打代码" />打代码
	<input type="checkbox" name="hobby" value="睡觉" checked="checked"/>睡觉
	<br />
	<label>隐藏域：</label>
	<input type="hidden" value="张三" />
	<br />
	<label>上  传：</label>
	<input type="file" name="fileImg" />
	<br />
	<labe1>下拉框：</label>
      <!--select标签中至少包含一对option-->
	    <select name="" id="">
		    <option>===请选择===</option>
		    <option>JAVA</option>
		    <option>SpringBoot</option>
		    <option>Springloud</option>
		    <!--在option中定义selected="selected"属性实现默认选中简写：selected-->
		    <option selected="selected">前后端分离架构</option>
		</select>
		<br />
		<label>文本域：</label>
        
		<!--cols:每行字符数（定义宽度）
				rows：显示的行数（定义高度）
			-->
		<textarea cols="60" rows="8"></textarea>
        <br />
		<input type="button" name="but" value="普通按钮" />
		<input type="submit" name="sub" value="提交按钮" />
		<input type="reset" name="sub" value="重置按钮" />
		<!--H5推荐使用方式-->
		<button name="but" type="submit">普通按钮</button>	
</form>

3.9.H5新增input标签

type="email"
type="url"
type="date"//日期组件：年/月/日
type="datetime-local"：年/月/日时/分/秒
type="time"：时/分
type="month"：年/月
type="number"：显示数字
type="color"：设置背景颜色
type="week"

<input type="date" />
<br>
<input type="datetime-local" />
<br />
<input type="time" />
<br />
<input type="month" />
<br />
<input type="number" />
<br />
<input type="color" />
<br />
<input type="week" />

3.10.H5多媒体标签

1.vedio（视频）

所有的浏览器都支持MP4格式

vedio标签相关属性：

src="url"：视频路径
poster="url"：封面路径
autoplay：自动播放
controls ：显示播放控件
width ：设置控件宽度
height：设置控件高度
loop ：设置循环播放
preload="auto/none"：是否预加载
muted：静音播放

<video src="" autoplay controls width="600px" height="400px" loop preload="auto" poster="" muted></video>

2.audio（音频）

所有浏览器都支持mp3格式

controls显示播放控件
loop 循环播放
autoplay （谷歌禁用）

<audio src="" controls loop></audio>

3.11.H5语义标签

传统网页布局结构

H5中引入一组语义化标签，这些标签皆在更好的描述网页内容的结构和含义。通过使用这些标签可以提高网页的可读性、可访问性、搜索引擎优化，以及代码的维护。

header：头部标签
nav：导航标签
article：内容标签
section：块级标签
aside：侧边栏标签
footer：尾部标签

H5语义标签网页布局结构

浅浅时光～～

关注

16
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫