[web]HTML基础知识

2024-03-12 07:10:03 分类：前端 热度：38 评论： 0

[web]HTML基础知识

一、标签

1.标签的意义

可以为一段文字或者一张图片添加超链接、将文字设置为斜体、改变字号等等。一般成对出现，分为单标签和双标签两种。


2.常见标签

①h标签：

标题标签。总共有六级，对应不同标题字样大小。


②P标签：

段落标签。相邻P标签间会空出一行。align 属性在标签内使用，用于表现文字的位置居中、靠左等。


③br标签：

换行标签。用于文字末尾，起换行作用。与P标签不同于相邻之间不空行。


④hr标签：

下划线标签。可用high、width与color属性来更改下划线的长宽与颜色。


⑤字体标签：

strong与b标签都可使字体变粗，strong标签权重更重通常用来告诉搜索引擎这个关键词或这句话是此页面的重点内容。em和i标签可使字体倾斜，em标签具有语义在搜索引擎里更受重视。u标签表现下划线。del标签表示删除线。

 

⑥ sub标签：

下标标签。可用于数学里的角标表示。

⑦sup 标签：

上标标签。可用于数学里的次方表达。

⑧pre标签：

可表示出输入的文字格式。

⑨span标签：

行内标签。可改变文本的样式，如字体大小、颜色、背景颜色、字体样式。

⑩div标签：

块级标签。可用作严格的组织工具，并且不使用任何格式与其关联。

注：行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行，如：span

块级标签：自动换行，独占一行，如：div hn p hr

3.表单标签

①form标签：

可用来表示需要向服务器提交的数据表单，在form的子标签（input、select、textarea...）里实现让用户输入、单选、多选等多种操作，一般与input标签连用。action属性在form标签内表示跳转路径,method属性在form标签内用来明确表单提交的方式 (get、post) 默认值是get,name属性在form标签内表示表单的名称。

注：a.路径：分为两种绝对路径和相对路径。绝对路径为从盘符开始到文件为止的一个路径

      b. get与post：get请求不是特别安全，会把用户信息暴露在地址栏；post请求相较于get会安全一点

②input标签：

通过type属性值的不同展示出不同效果。

        type 的取值：                                                常见的属性：
                text ----- 文本框                                             readonly ------ 只读 字段只可以读不能修改
                password ---- 密码框                                    checked ---- 默认选择
               submit ----- 提交按钮                                     disabled ----- 表示禁用 不可以点击
               radio ------ 单选按钮                                       autofocus ----- 默认光标的位置
               checkbox ----- 多选按钮                                 required ----- 不能空白提交
                reset ----- 重置按钮
               button ----- 普通按钮
               image ----- 图像按钮
               file ------ 文件
               hidden ---- 隐藏域
               email ---- 邮箱域
               color ----- 颜色域
               date ----- 日期
               time ----- 时间
               datetime-local ----- 日期+ 时间
               range ------ 进度条
  语法格式： 
<form action="C:\Users\前端\HTML\作业4.html" method="post" name="register">
        <!--在这里放入子标签input/select、textarea等让用户输入内容-->
        <p>
            用户名:<input type="text">
            </p>
            <p>
            密码:<input type="password">
            </p>
            <p>
            请选择您的性别：<input type="radio" name="gender">男
            <input type="radio" name="gender">女
            </p>
            <p>
            请选择您的爱好：<input type="checkbox" name="aihao">唱歌
            <input type="checkbox" name="aihao">跳舞
            <input type="checkbox" name="aihao">rap
            <input type="checkbox" name="aihao">打篮球
            </p>
            <input type="submit" value="登录">
            <input type="reset" >
            <input type="button" value="普通">
           <input type="image" src="C:\Users\前端\1.png"> 
            <input type="file">
            <input type="hidden" value="1234567"><br>
            请输入您的邮箱：<input type="email">
            <input type="color">
            <input type="date">
            <input type="time">
            <input type="datetime-local">
            <input type="range" ></form>
<form action="demo01.html">
<p>
用户名:<input type="text" required>
</p>
<p>
用户名:<input type="text" readonly value="lisi" disabled>
</p>
<p>
密码:<input type="password" autofocus>
</p>
<p>
请选择您的性别：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
</p>
<p>
请选择您的爱好：<input type="checkbox" name="aihao">唱歌
<input type="checkbox" name="aihao">跳舞
<input type="checkbox" name="aihao">rap
<input type="checkbox" name="aihao">打篮球
</p>
<input type="submit" value="登录">
<input type="reset" >
<input type="button" value="普通">
<!-- <input type="image" src="按钮.jpg"> -->
<input type="file">
<input type="hidden" value="1234567"><br>
请输入您的邮箱：<input type="email">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="range" >
</form>
③select标签：

下拉列表框。一般与option连用。selected属性表示默认被选中的选项 ，multiple属性表示以列表的形式展示。

<form action="">
请选择您的收货地址：
<select name="" id="" multiple>
<option value="">重庆</option>
<option value="">成都</option>
<option value="">贵州</option>
<option value="" selected>云南</option>
<option value="">陕西</option>
</select>
</form>

 

④textarea标签:

类似于文本框显示文本域。cols属性表示多少列，用于表示文本域的宽度。rows属性表示多少行，用于表示文本域的高度 

<textarea name="" id="" cols="60" rows="50"> textarea标签</textarea>
④a标签：

主要用于从一个页面跳转到另一个页面。vlink属性表示访问过的超文本链接的颜色。alink 属性表示激活超文本链接的颜色。href属性表示要跳转的链接。link属性表示超文本链接的颜色。text属性表示文本的颜色。bgcolor属性表示背景颜色。background属性表示背景图片

<a href="https://www.baidu.***/">点击我</a>

target 属性： 
<a href="https://www.baidu.***/">点击我</a>
<a href="https://www.baidu.***/" target="_blank">点击我</a>
<a href="https://www.baidu.***/" target="_self">点击我</a>
<a href="https://www.baidu.***/" target="_parent">点击我</a>
<a href="https://www.baidu.***/" target="_top">点击我</a>
锚点：使页面的展示到达某一个指定的地点 一般形式为：#+id名称进行链接 
<a href="#01"><h3>第一章</h3></a>
<a href="" id="01">第一章</a><br>
⑤img标签：

向网页嵌入图像。src与alt属性是img标签的必需属性。图片常见的格式：GIF JPG PNG BMP等

src属性表示图片的路径 （绝对路径和相对路径）

alt属性表示代替图片文本的内容（图片路径错误或因浏览器的原因打不开图片，用文字表示） width ----- 宽度

height ---- 高度 单位都是px %

border ------ 边框 默认值是0

align ---- 位置   

位置：top --上对齐 middle -- 居中对齐 bottom --下对齐（默认对齐） right -- 右对齐left -- 左对齐title ----- 图片的标题 ------ 用来显示描述图片的文字

​
<img src="图片1.png" alt="图片" width="200px" height="10%" border="5"><br>
上对齐<img src="图片1.png" alt="图片" width="200px" height="10%" align="top"
border="1"><br>
下对齐<img src="图片1.png" alt="图片" width="200px" height="10%" align="bottom"
border="1"><br>
居中对齐<img src="图片1.png" alt="图片" width="200px" height="10%"
align="middle" border="1"><br>
左对齐<img src="图片1.png" alt="图片" width="200px" height="10%" align="left"
border="1"><br>
右对齐<img src="图片1.png" alt="图片" width="200px" height="10%" align="right"
border="1"><br>
默认对齐<img src="图片1.png" alt="图片" width="200px" height="10%" border="1">

​<img src="图片1.png" alt="图片" title="这是一张图片">
⑥多媒体标签： 

audio 标签在网页里插入音频   vide标签在网页里插入视频

controls属性表示的是播放器的组件

autoplay属性表示的自动播放

loop属性表示的是循环播放

<audio src="GGB.mp3" controls autoplay loop></audio>
<video src="猪猪侠.mp4" controls width="300px" height="200px"></video>

二、特殊字符

三、表格布局

1.表格标签：

①table标签：

用来定义表格，整个表格都包括在该标签里

②thead标签：
用于标识表格的表头，用于组合表格表头内容
③tbody标签：
用于对表格中主体内容进行分组
④tfoot标签：
用于对表格中页脚内容的分组
⑥tr标签：
用于创建表格的行，每一行都是由一个或多个单元格组成，其中单元格可以通过td和th标签创建
⑦td标签：

用于创建表格的行和列

<table>
<thead>表头</thead>
<tbody> 表格的主干
<tr> 行
<td>第一行第一列</td> 列
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>表尾</tfoot>
</table>

2.表格的边框

border属性 设置表格边框 
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>专业</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>软件工程</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>物联网</td>
</tr>
<tr>
</table>

3.表格的宽高

width属性表示 宽度，height属性表示高度 
<table border="1" width="200px" height="200px">
<tr>
<td>1</td>
<td>张三</td>
<td>软件工程</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>物联网</td>
</tr>
</table>

4.表格背景

bgcolor属性表示 背景颜色，background属性表示背景图片 
<table border="1" width="400px" height="400px" bgcolor="pink" background="图片
1.png">

5.表格的位置

align属性 表示表格的位置，如 left center right 
<table border="1" width="400px" height="400px" bgcolor="pink"align="center">
<tr>
<td>1</td>
<td>张三</td>
<td>软件工程</td>
</tr>
</table>

6.表格的间距和边距

cellpadding属性 表示的是表格边距（表示单元格内元素距离单元格边框的距离）
cellspacing属性 表示的是表格的间距（表示的是单元格和单元格之间的距离） 
<table border="1" width="300px" height="300px" cellpadding="30"
cellspacing="20">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

7.表格的嵌套

在表格里嵌套另一个表格

<table border="1" width="300px" height="300px" bgcolor="pink">
<tr>
<td>&nbsp;</td>
<td>
<table border="1" width="200px" height="300px" bgcolor="green">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

8.表格的合并

单元格的合并行。
rowspan="n"里的n是一个整数，表示在单元格垂直方向去跨行（合并行）
colspan = "n"里的n 是一个整数，表示在单元格水平方向去跨列（合并列） 
<table border="1" cellspacing="0" width="300px" height="300px">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

四、列表标签

1.有序列表 （ol）

type 属性表示设置序号的种类 ，默认值是数值1
start 属性 表示 序号开始的位置
reversed 属性 表示 反序（降序） 
<ol type="1" start="7" reversed>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="A" start="C" reversed>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="a">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="I" start="II">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="i">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>

2.无序列表（ul）

type 属性 表示 无序列表的样式
disc （默认值 实心圆）
circle( 空心圆 )
square( 实心方块 ) 
<ul type="disc">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ul>
<ul type="circle">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ul>
<ul type="square">
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ul>

3.数据列表(dl)

HTML5 之后一个 dl 里面可以包含多个 dt 
 <dl>
            <dt>新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dt>新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dt>新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            </dl>

五、多窗口框架

一个页面可以显示多个窗口

1.framset 标签：

不能和 body 标签连用。HTML5之后不支持这个标签，使用的是 iframe 标签
cols属性 定义页面列方向的尺寸或者数目
rows属性定义行 
<body>
<iframe src="demo01.html" frameborder="0"></iframe>
</body>
<frameset cols="25%,40%,*">
<frame src="demo01.html"></frame>
<frame src="..\代码\oo\oo.html"></frame>
<frame src="..\代码\oo\oo.html"></frame>
</frameset>
转载请说明出处内容投诉
CSS教程_站长资源网 » [web]HTML基础知识
星抖云新媒体运营飞哥

星抖云新媒体运营飞哥

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买