HTML知识点

最新推荐文章于 2024-06-15 21:20:00 发布
最新推荐文章于 2024-06-15 21:20:00 发布
阅读量43 收藏
点赞数
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Janemy_/article/details/127202333
版权

目录

HTML概述

HTML基础语法

基本常用标签

特殊符号转义

表格

表单

HTML概述

超文本标记语言.超文本指的是网页中可以显示的内容,例如超链接,图片,视频,音频......

标记:标记指的是标签,通过标记符号来告诉浏览器网页内容该如何显示(商品的标签,例如买衣服,衣服上有标签,介绍衣服信息.)

html中提供了许多的标签,不同的标签功能不同,我们可以使用标签来编写网页,最终通过浏览器进行翻译,呈现最终的展示效果,就是使用标记标签来编写网页内容

作用:开发基本的网页

HTML基础语法

网页的基本语法:网页是由标签构成的

<开始标签>标签体</结束标签>  :称为闭合标签,双标签

<标签名/>  :称为自闭合标签

标签中可以拥有属性,通过属性进一步修饰标签特性 ,href属性必须写在开始标签中.一个标签可以有多个属性     

格式:属性名="属性值"

位置:<标签名 属性名="属性值" >xxx

多个:<标签名 属性名="属性值"  属性名="属性值">xxx

基本常用标签

快捷键  Ctrl+shift+/:注释不显示在网页上

标题标签:<h1> </h1>...<h6></h6>(只能有6个标题标签)

段落标签:<p> </p>

使用超级链接与网络上的另一个文档相连,就是通过链接来直接访问其他网页资源

换行标签:<br/>  在哪换行,就在哪里插入标签

列表:无序列表<ul><li></li></ul>   前面有一个图标,没有序号

     <ul>
            <li>列表项内容</li>
            <li>列表项内容</li>
            <li>列表项内容</li>
        </ul>

         有序列表<ol><li></li></ol>   前面有一个序号,通过type这个属性改变序号规则

      <ol>
            <li>列表项内容</li>
            <li>列表项内容</li>
            <li>列表项内容</li>
        </ol>

超链接:<a></a> 

<a href="链接地址">  target="打开链接文档的位置">超链接的文字</a>

<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

注:打开链接文档的位置:默认为_self在自身页面打开,_blank在新页面打开

target="-self在当前窗口,-blank在新窗口打开"

图像标签:<img/> src="图片的引用地址"

<p><img src="img/taobao.png" alt=""><b>阅读淘宝网服务协议</b></p>

标尺线:<hr color ="颜色" width="宽" size="高" />

//<head> 网页头部</head>
// <body > 网页身体 </body>
<html>
	<head>
		<!-- 设置浏览器解析网页时,使用的字符集  meta,title,link,style,script-->
		<meta charset="utf-8" />
		<title>百度一下,你就知道</title>
		<link rel="icon" href="img/baidu.ico" />
	</head>
	<body text="red" bgcolor="aqua">
		网页的内容都写在body中
	</body>
</html>

特殊符号转义

<b>:加粗文字

大于号:&gt      空格:&nbsp      商标(TM):&table

小于号:&it       版权:&copy      注册商标(R):&reg

表格

基本构成标签

table:表格标签,表示一个表格区域

tr标签:表格中的行

th标签:表格中的表头

td标签:表格单元格(普通单元格)

border:边框  width:宽度  height:高度

cellpadding:"0" 设置内容到边框的距离

cellspacing:"0" 设置单元格边框与边框的距离

课表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" align="center" width="500" height="100">
			<tr align="center">
				<td>项目</td>
				<td colspan="5">上课</td>
				<td colspan="2">休息</td>
			</tr>
		<tr bgcolor="pink">
			<th>星期</th>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
			<th>星期六</th>
			<th>星期日</th>
		</tr>
		<tr align="center">
			<td rowspan="4">上午</td>
			<td>语文</td>
			<td>数学</td>
			<td>英语</td>
			<td>英语</td>
			<td>物理</td>
			<td>计算机</td>
			<td rowspan="4">休息</td>
		</tr>
		<tr align="center">
			
			<td>数学</td>
			<td>数学</td>
			<td>地理</td>
			<td>化学</td>
			<td>历史</td>
			<td>计算机</td>
			
		</tr>
		<tr align="center">
			
			<td>语文</td>
			<td>数学</td>
			<td>历史</td>
			<td>计算机</td>
			<td>物理</td>
			<td>化学</td>
			
		</tr>
		<tr align="center">
			
			<td>数学</td>
			<td>数学</td>
			<td>地理</td>
			<td>化学</td>
			<td>历史</td>
			<td>计算机</td>
			
		</tr>
		<tr align="center">
			<td rowspan="2">下午</td>
			<td>数学</td>
			<td>数学</td>
			<td>地理</td>
			<td>化学</td>
			<td>历史</td>
			<td>计算机</td>
			<td rowspan="2">休息</td>
		</tr>
		<tr align="center">
			
			<td>数学</td>
			<td>数学</td>
			<td>地理</td>
			<td>化学</td>
			<td>历史</td>
			<td>计算机</td>
			
		</tr>
		</table>
	</body>
</html>

表单

1.表单:用于前端网页向后端服务器发送数据的组件,表单中有许多输入性,选择型组件

2.表单标签:表示多个组件在同一个表单中就是一个整体

3.input标签:

①其他属性:

action="后端服务器地址"   method="提交方式"

<form action=" "   method="get">

name="userName"名字

value="值"

readonly="只读,可以提交内容"

placeholder="提示内容,不是实际内容"

disabled="禁用组件,不能再提交内容"

②.type属性:

<input type="text"/>  单行文本输入框

<input type="password"/>密码框基本语法

<input type="radio" value="" checked="">单选框基本语法

注:单选框通过name属性分组,name相同为一组,可以互斥,选择性组件需要赋予默认值

<input type="checkbox" value="" name=""/>复选框基本语法

注:复选框也需要通过相同的name来分组,因为可能有多个复选框

<input type="file" name="" >文件选择

checked="默认选中"

accept="文件后缀名"限制文件类

4.select:下拉框

<option value="100">宝马<option/>

<select name="career">
			<option value="">老师</option>
			<option value="">厨师</option>
			<option value="">医生</option>
			<option value="">模特</option>
			<option value="">工程师</option>
			</select>

5.textarea:多行文本框

<textarea name="mark" rows="5" cols="30"></textarea>

6.按钮

<input type="submit"/><!-- 提交按钮,可以触发表单提示动作 -->
<input type="reset"/><!-- 重置按钮 -->
<input type="button"/><!-- 普通按钮,需要添加事件来完成功能 -->

Janemy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 知识点总结
m0_57202083的博客
08-12 2421
HTML实例 <!DOCTYPE html> <!-- 注:<!DOCTYPE>标签没有结束标签! --> <html><!-- 元素是 HTML 页面的根元素 --> <head><!-- (头部部分) --> <meta charset="utf-8"> <title>显示在浏览器标题栏中的标题</title> </head> <body>&.
html知识点
07-26
学习html css所总结的一些知识点
HTML知识点总结大纲
super_Fake的博客
11-30 5763
HTML知识点总结 一.基本知识 HTML 指的是超文本标记语言: HyperText Markup Language HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签> HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。 基本HTML 网页结构如下，body标签内的才是我们在浏览器上所视内容 <!DOCTYPE html>声明为 HTML5 文档 &
HTML基础知识点
qq_40046544的博客
07-27 8374
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点大全
m0_69674158的博客
05-04 6791
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2716
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
HTML常用知识点总结笔记
果冻
07-01 6134
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
html重要知识点总结
mmcrsx_blog的博客
12-03 8442
HTML知识点总结 一、div，span 看起来相对于,啥的没有什么效果，实际上是最实用的，有两大功能 1、容器，分块明确，使页面更结构化 dkjgaklgja 分块操作 &src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F98105c8b5929e326b0a898b2386ee7ddd5f0434a.jpg" width="200
html最全知识点（超级详细）
xiaotai1234的博客
09-08 1万+
html最全知识点（超级详细） 一、网页基础知识 1.认识网页（了解） 2.五大浏览器介绍（记忆） 概述 各浏览器的市场份额 查看网站： http://tongji.baidu.com/data/browser 浏览器内核 3.Web标准（记忆） 为什么会有web标准 Web 标准构成 图解Web标准 把一个页面看成一个人 **结构标准：**决定是否有一个好的身体。 **样式标准：**决定是否化妆的美丽漂亮。 **行为标准：**决定是否有吸引人的行为。 二、HTML基础概念 1.HTML初
[HTML、CSS]知识点
热门推荐
进步*于辰的博客
04-15 1万+
如果文中阐述不全或不对的，多多交流。
HTML页面知识点小总结(巨详细)
bafeiq的博客
02-11 8423
HTML页面最基础的东西总汇，建议刚开始接触前端页面的小伙伴们收藏哦，可以随时拿出来学习或者复习加深印象。
Html知识点汇总.docx
08-29
Html知识点汇总 Html是超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。本文将对Html知识点进行总结和汇总，覆盖了Html的基本概念、标签、属性、语义化标签、实体字符、块元素、...
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
html知识点实践经验总结
09-28
...`<caption>`添加表格标题，`<colspan>`和...这些HTML知识点只是冰山一角，实际应用中还需要结合JavaScript、CSS、DOM等知识，以实现更丰富的交互和动态效果。持续学习和实践，才能更好地掌握这个强大的网页制作工具。
前端之HTML知识点整理汇总(推荐)
09-28
下面小编就为大家带来一篇前端之HTML知识点整理汇总(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
weixin_42283461的博客
06-14 376
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
HTML前端
最新发布
2302_77125952的博客
06-15 541
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 505
超文本标记语言（HTML）简介
DAY02 HTML
adminstate的博客
06-15 792
HTML基础学习
渡一成哥html知识点
09-16
渡一成哥的HTML知识点包括： 1. 跑马效果: 使用CSS的动画效果和背景图像的位置变换来实现图像的移动效果。可以通过设置关键帧动画和背景图的位置来控制图像的移动速度和方向。 2. rotate3D变换: 使用CSS的transform...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值