HTML基础——第一部分

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量181 收藏
点赞数
分类专栏： Web前端开发 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45568418/article/details/107548548
版权

HTML基础——第一部分

1. 文档类声明标签

<!DOCTYPE html>
<html lang="en"> <!--采用英文显示-->
<!--采用UTF-8保存文字-->
<meta charset="UTF-8">

2. 段落标签

文本会根据浏览器窗口的大小自动换行

<p>~</p>

3. 标题标签

标题标签总共分为六种，分别为一级标签，二级标签… 对应标题会加粗显示

<h1>---</h1>
<h1>---</h1>
...
<h6>---</h6>

4. 换行标签

对文本内容强制换行（单标签）

<br />

5. 文本格式化标签

名称作用
<strong></strong> , <b></b>加粗，突出显示，strong更强烈一点
<em></em>, <i></i>字体倾斜
<del></del> ，<s></s>删除线
<ins></ins>，<u></u>下划线

<div>和 <span>标签：无语义，可以理解为一个盒子，在一行只能放一个div元素，而span元素可以在一行放多个

6. 图像标签

src是<img>的必须属性，属性值为文件指定路径
其他属性如下

属性名称属性值
“alt”对应图像的替换文本
“title”鼠标放在图像上时，出现的提示文本
“width”图像设定的宽度
“height”图像设定的高度
“border”图像设定边框

7. 超链接标签

链接将会以文本内容显示链接

<a href="目标地址" target="指定目标窗口的弹出方式">文本内容</a>

其中target属性值分别有_self: 当前窗口打开页面，blank：新窗口打开页面

7.1 外部链接

外部链接一般指链接外部服务器URL地址

<a href="https://..." target="指定目标窗口的弹出方式">文本内容</a>

7.2 内部链接

网站内部页面之间的相互链接

<a href="test.html" target="指定目标窗口的弹出方式">文本内容</a>

7.3 空链接

<a href="#" target="指定目标窗口的弹出方式">文本内容</a>

7.4 下载链接

<a href="链接文件下载地址" target="指定目标窗口的弹出方式">文本内容</a>

7.5 网页元素链接

链接地址以图像形式显示

<a href="目标地址"><img src="文件路径"></a>

7.6 锚点链接

快速定位到页面中的一个位置
在链接文本href属性中，设置属性值为#名字形式，如

<a href="#first">定位</a>
<!--其中first为定位另一个标签的id值-->
<h3 id="first">三级标题</h3>
<!--在页面中点击定位就可以切换到h3标签-->

在html中注释标签格式为<!- -注释- ->
如果想在html页面中输出‘<’,’>'类字符，可以使用该字符的特殊形式

特殊字符形式
&nbsp空格
&lt<
&gt>

8. HTML表格标签

8.1 表格标签

标签定义
<table></table>定义表格标签
<tr></tr>定义表格中的每一行
<td></td>定义表格中的单元格
<th></th>表头单元格标签并居中显示

8.2 表格属性（table）

属性名属性值作用
alignleft,center,right指定对齐方式
border1或者""规定单元格是否拥有边框
cellpadding像素值规定单元格边沿与内容之间的空白
cellspacing像素值规定单元格之间的空白
width像素值和百分比规定表格的宽度
height像素值和百分比规定表格的高度
<!--表格属性应用举例-->
<table align="center" width="500" height="249" boder="1">
...
</table>

8.3 表格结构标签

表格结构标签分别有<thead>与<tboday>,类似于html中的head与body标签，
应用举例

<!--表格结构标签应用举例-->
<table align="center" width="500" height="249" boder="1">
<thead>
	<tr>
		<th>名称一</th>
		<th>名称二</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>内容一</td>
		<td>内容二</td>
	</tr>
</tbody>
</table>

8.4 合并表格中的单元格

合并方式可以分为：

（1）跨行合并:rowspan=“合并单元格的个数”
（2）跨列合并:colspan=“合并单元格的个数”

<td rowspan='2'>内容</td>

目标单元格：跨行合并时，目标单元格为需合并的上方单元格，跨列合并时，目标单元格为需合并的左侧单元格。

合并单元格三部曲：
1.确定是跨行还是跨列
2.找到目标单元格，写上合并格式
3.删除多余单元格

9. 列表标签

在html中列表可以分为三大类：（1）无序列表；（2）有序列表；（3）自定义列表；

9.1 无序列表

<ul>标签中只能放<li>标签
<li>标签中可以存放任何元素

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

9.2 有序列表

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

9.3 自定义列表

<dl>
	<dt>名词1(定义项目和名字)</dt>
	<dt>解释1</dt>
	<dt>解释2</dt>
</dl>

10. 表单标签

表单可以分为三部分：（1）表单域；（2）表单控件；（3）提示信息；
<form>标签定义表单域，实现用户信息收集和传递
表单属性如下：

属性名属性值作用
actionURL地址指定接受并处理表单数据服务器的url地址
methodget/post发送请求
name名称域名城

10.1 input标签

<input>标签用于收集用户信息（单标签），拥有一个type属性。

type常用属性值
属性值用途
password密码框
text文本框
radio单选按钮
checkbox复选框
注意事项

复选框和单选框中的name属性值必须一致
复选框和单选框按钮属性设置checked=“checked”,该框会在首次加载中便会被默认选中
value属性可以在input框中输出提示信息
maxlength属性可以规定字段中字符的最大长度

10.2 select标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option selected="selected">选项3</option>
</select>
<!--在<option> 中定义 selected ="selected"时，当前项即为默认选中项-->

如下图所示：
在这里插入图片描述

10.3 textarea表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea> 标签。在表单元素中,<textarea> 标签是用于定义多行文本输入的控件。

<textarea rows="3" cols="20">
文本内容
</textarea>
qq_45568418
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础编程——简介及第一行代码
Box_sir的博客
08-25 3688
HTML基础编程——简介及第一行代码 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 第一行代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>helloworld</title> </
网页设计（一）——HTML基础概念
初学者
07-11 7151
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 目录 HTML基础概念 HTML是什么 HTML标签 HTML标签——实例1 建立一个HTML文档——实例2 HTML标签的属性和样式——实例2.5 总结.
TBODY的使用方法和意义
weixin_43831584的博客
10-03 5488
TBODY 元素内包含的有效标签有： TD TH TR TBODY 元素会为全部表格自动定义，就算表格没有显式定义 TBODY 元素。 table 对象及其相关的元素有独立的表格对象模型，这与常规对象模型所采用的方法有很大不同。 此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。 此元素不会被渲染。 此元素需要关闭标签。 tbody定义表格的主体 在table中thead,tfoot以及tbody可
table表格循环高亮显示每一行
listener_life的博客
01-12 1806
第一步，创建jsp或者html文件，并引入jQuery插件，如下： page contentType="text/html;charset=UTF-8" language="java" %> html> head> meta charset="UTF-8"> title>表格高亮显示案例title> script style="text/javascript" s
HTML基础————table标签
憨憨的博客
05-07 1万+
html——table
HTML——HTML基础语法
Navy_Dagger的博客
04-11 3081
目录 1.什么是HTML? 2.HTML基础语法 （1）HTML标签 （2）HTML元素 3.实例 1.什么是HTML? HTML 指的是超文本标记语言: HyperText Markup Language,是一种用来描述网页的一种语言。值得注意的是HTML不是一种编程语法，而是一种标记语言。标记语言是一种标记标签，HTML就是使用标记标签来描述网页。HTML文档也叫做web网页，包含了HTML标签和文本内容。 2.HTML基础语法 （1）HTML标签 ...
HTML——表格
热门推荐
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
JavaScript基础知识————部分
不善严辞的博客
08-19 236
知识点一：JavaScript使用小技巧 Window.onload = function(){···} //其中onload表示页面加载完毕再执行 JSON是用于存储和传输数据的格式 JSON通常用于服务端向网页传递数据 任何标签都可以加id属性 任何标签里面的任何属性都可以修改 为a标签添加链接：<a href = “javascript: ;” > className的使用：在JavaScript中使用class要改为className;因为class是关键字 利用Functi
【EduCoder答案】HTML——基本标签
weixin_44505587的博客
09-04 668
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——基本标签 >>>查看 第1关:创建第一个 HTML 标签 第2关:创建 - 标签 第3关:创建 p 标签 第4关:创建 a 标签 第5关:创建 img 标签 第6关:创建 div 标签 第7关:添加注释 ...
第一章 Python基础 ——一起搬砖打地基
小白撸码日记
11-27 1863
前言 学习Python需要很多数学知识么？ ——不用，会加减乘除就可以啦 学习Python需要会英语么？ ——不用，知道26个英文字母就行可以，不行咱还可以百度啊 学完《Python编程快速上手——让繁琐的工作自动化》的知识，能干点啥？ ——正如书的副标题，让繁琐的工作自动化： 移动并重命名几千个文件，将它们分类放入文件夹； （解放双手神器！） 填写在线表单，而不需要打字； （传说中的自己动。。...
网页制作基础语言-HTML(1).ppt
11-20
HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。它允许开发者通过一系列的标签来描述网页的...掌握HTML是成为网页开发者的第一步，随着技术的演进，HTML将持续进化以适应互联网的新需求。
粉色温馨——HTML框架示例
01-21
"主页"代表项目的主页面，是用户进入网站后看到的第一个页面。这个主页可能包含导航菜单、特色内容、滑动图片等元素，以粉色为主色调，营造出温馨的氛围。 "菜单"是指网站的导航菜单，它帮助用户浏览网站的不同部分...
软件技术基础第一次实验课1
08-08
【软件技术基础第一次实验课1】的实验主要涵盖了HTML的基础知识和初步的Web页面构建。HTML，全称为HyperText Markup Language，是一种用于创建网页的标准标记语言。在这个实验中，学生需要掌握HTML的基本元素、标签...
从入门到精通HTML5——PDF——网盘链接
02-27
第1篇 HTML基础 　第1章 HTML基础 3 　教学录像：22分钟 　1.1 HTML的基本概念 4 　1.2 HTML发展史 4 　1.3 HTML的基本结构 5 　1.3.1 HTML文件的编写方法 5 　1.3.2 文件开始标签<html> 7 　1.3.3 文件头部...
HTML5期末大作业：网站——个人博客
04-18
这个“HTML5期末大作业：网站——个人博客”项目显然旨在让学生掌握并实践HTML5的相关知识，通过创建一个完整的个人博客网站来提升技能。在这个项目中，我们可以探讨以下几个关键知识点： 1. **HTML5结构元素**：...
html--图片变化
2301_81140745的博客
07-20 420
2.点击上传图片会有变化。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 323
网页隐藏版一行小说阅读器
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 670
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1223
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值