前端之HTML5

最新推荐文章于 2023-07-09 16:45:20 发布
最新推荐文章于 2023-07-09 16:45:20 发布
阅读量251 收藏
点赞数
分类专栏： 前端web 文章标签： html web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raojiaxing_/article/details/105175552
版权

目录

摘要：HTML

首先我要跟小伙伴们声明1下，本篇文章内容属于web前端，我们可以下载一个HBuilder软件，这是一款写前端代码的免费工具。下载地址：[http://xiazai.sogou.com/detail/34/16/2104734992810858581.html?e=1970]

HTML：超文本标记语言，主要作用是用来编写网站页面。

超文本：超文本是在表达形式上超出文字范围。

文字，
超链接，含有跳转的对象，
图片，
声音，
视频

标记：指的的HTML的代码风格，HTML依赖标签进行内容的表述。

标签：
	<标签名称  属性=”值”>
	单标签
		<标签名称  属性=”值”>
	双标签
		<标签名称  属性=”值”></标签名称>

简单入门html案例：

1.创建一个txt文件

在这里插入图片描述

2.在index.txt当中输入下面的代码：

<html>
         <head>
                   <title>
		             首页
                   </title>
         </head>
         <body>
                 <h1> 库里是我偶像 </h1> 
         </body>
</html>

3.修改index.txt的后缀为.html
在这里插入图片描述
4.双击，在浏览器里看到了自己写的界面了，so happy ，too easy对吧~

在这里插入图片描述

一.常用的HTML标签

1. h标签

标题标签，一共是h1-h6六个等级，再html当中代表标题。

在这里插入图片描述

2. 文本常用标签—p标签

p标签,文本标签，通常用来存放文字。
一个p占一行，html当中大段的文字通常是用p标签表示的。
在这里插入图片描述
在这里插入图片描述

3. 文本常用标签—span标签

span标签不换行
在这里插入图片描述
在这里插入图片描述

3. 换行标签（单标签）

在这里插入图片描述
在这里插入图片描述

4. 独立一行的一条线

在这里插入图片描述
在这里插入图片描述

5. 网页上的空格

在这里插入图片描述
在这里插入图片描述

5. 图片标签（单标签）

属性：src 图片加载的路径
属性：alt 图片加载失败的提示文字
属性：title 图片的提示文字

在这里插入图片描述
在这里插入图片描述

6. 超链接标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7. 列表标签

有序列表

也可以通过type属性进行跳转
Type:
	a  代表小写字母
	i  代表小写罗马数字
	A  代表大写字母
	I  代表大写的罗马数字
	1  代表数字 默认

在这里插入图片描述
在这里插入图片描述

无序列表

无序列表也有type属性，这里的值不必死记。
disc 实心圆点
circle 空心圆点
square 实现方块

在这里插入图片描述
在这里插入图片描述

8. 表格标签

在这里插入图片描述
在这里插入图片描述
我们可以改变表格的样式，通过修改table的一系列属性:

1、	cellspacing 单元格和单元格直接的距离

2、	cellpadding 单元格和内容的距离
 
3、	width 表格的宽度

4、	height 表格的高度，由于数据条数不固定，所以通常不设置高度

在这里插入图片描述

9. 表单标签

表单就是表格外面加一层form标签。
通过Input元素 默认是一个文本框，然后对type属性进行设置即可：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<form>
		    <table>
		    	
		        <tr>
		            <th> 文本内容：</th>
		            <td> <input type="text"></td>
		        </tr>
		        
		        <tr>
		            <th> 密码内容：</th>
		            <td> <input type="password"></td>
		        </tr>
		        
		        <tr>
		            <th> 单选框：</th>
		            <td>
		                男:<input type="radio" name="gender">
		                女:<input type="radio" name="gender">
		            </td>
		        </tr>
		        
		        <tr>
		            <th> 复选框：</th>
		            <td>
		                python:<input type="checkbox" name="gender">
		                php:<input type="checkbox" name="gender">
		                java:<input type="checkbox" name="gender">
		                c:<input type="checkbox" name="gender">
		                c++:<input type="checkbox" name="gender">
		            </td>
		        </tr>
		        
		        <tr>
		            <th> 文件框：</th>
		            <td>
		                <input type="file">
		            </td>
		        </tr>
		        
		        <tr>
		            <th> 隐藏域：</th>
		            <td>
		                <input type="hidden">
		            </td>
		        </tr>
		        
		        <tr>		     
		            <th> 提交按钮：</th>
		            <td>
		                <input type="submit" value="提交">
		            </td>
		        </tr>
		        
		        <tr>
		            <th> 按钮：</th>
		            <td>
		                <input type="button" value="正常按钮">
		            </td>
		        </tr>
		        
		        <tr>
		            <th> 重置按钮：</th>
		            <td>
		                <input type="reset" value="重置按钮">
		            </td>
		        </tr>
		        
		    </table>
		    
		</form>

		
		
	</body>
</html>

在这里插入图片描述

向着朝阳，我走过冬夜寒冬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 Html5
weixin_64909133的博客
12-30 566
1.(command加/)备注快捷键 auto save自动保存 2. auto save 自动保存 3.设置 常用设置 font size 设置大小 4.自动折行 设置里开启 折行设置开启 word wrap 5.手动折行快捷键ctrl+z 6.前段分为 html（标签结构）（人） css（对标签修饰）（衣服） 3s行为交互（动态交互效果）（讲课） 7.html和html5 html 超文本标记语言 hyper（超级） text（文本） markup（标记） la...
前端HTML5常用基础知识总结
不想学习的打工人的博客
07-11 2186
HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架： 1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
前端之html5
weixin_53105591的博客
07-09 982
datalist （不同浏览器显示不同的样式）类似于百度搜索的下拉提示。6 支持chrome，safari，Opera，firfox，ie（9版本以上）浏览器。datetime-local 年月日选择。tel 手机号---用于移动端。week 一周选择。hidden 隐藏元素。spellcheck 拼写检查。密码，多行框，单选框，多选框不可使用。draggable 可拖动。
web前端 HTML5
程序员柒的博客
06-29 648
本文简单的讲解里HTML5的基本内容和简单的用法，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为 可扩展超文本标记语言 XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求 ,XHTML语法比较严格，存在DTD定义规则, XHTML可以混合各种XML应用，比如MathML、SVG，XHTML对大小写敏感，标准的XHTML标签应该使用
前端面试必备之html5的新特性
09-28
HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。所以当我们在面试前端工作的时候，遇到html5相关的问题...下面这篇文章就来跟大家分享介绍了关于前端面试必备之html5新特性的相关资料，需要的朋友可以参考下。
说明html5前端开发pdf
最新发布
06-05
国内首家完整的移动前端开发课程体系，高度专注移动端，特聘原中科院计算所培训中心WEB水印端专家、原BAT(百度、阿里、腾讯)等企业H5工程师联合开发:兼具深度、广度、实用性，涵盖绝大部分企业招聘需求;完美学习曲线...
前端开发HTML5
03-26
内有两个文件，其中一个为HTML5从入门到精通，适合小白下载学习。
2022冬奥会前端作品+HTML5 CSS JavaScript
01-15
2022年冬奥会前端作品充分展示了HTML5、CSS和JavaScript等前端技术的强大威力。 首先，采用了HTML5，使页面结构更语义化，提高了网站的可访问性和搜索引擎优化。这为用户提供了更清晰、直观的内容呈现。 其次，CSS...
html5登录界面前端
09-25
超简单自己做的一个登录界面
前端HTML以及HTML5（基本标签）
weixin_30319097的博客
10-16 117
前面一章介绍了一下前端的发展，这章简单介绍一下html的发展以及基本的标签。 一、HTML的发展史 　　1、概念 　　　　超文本标记语言（HyperText Markup Language，简称HTML）是为 [ 网页创建和其他可在浏览器中看到的信息 ] 设计的一种标记语言。 　　2、相关发展历程：　　　　* 超文本标记语言（第一版） --- 在1993年6月作为互联网工程小组（...
前端入门：HTML5（一）
new_python的博客
07-23 533
一、什么是HTML？ 是用来描述网页的一种语言，是指超文本标记语言，不是编程语言是一种标记语言。 二、基础标签 1、html基础标签 head、body（主体部分） 2、html标题 h1…h6等标签进行定义标题，分别对应字体的从大到小 3、html段落 p标签定义一个段落的文字，不在标签内的文字要重启一行 4、html链接 a标签定义链接，href属性定义链接地址 5、html图像 img标签定义图像 src属性：图像文件地址 6、单标签 /br: 换行 三、html元素、属性、格式化 1、通用标签属性：
HTML5基础知识汇总（一）
weixin_30315723的博客
09-08 250
一、HTML的开发工具和使用的浏览器 开发工具：记事本等文本编辑器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。 浏览器：Chrome、Firefox、IE、Safari、IPhone、Android。 二、HTML的基本要素 DOCTYPE 描述文档的类型 html 网页的...
HTML5前端基础知识
patmos
10-14 335
HTML5基础知识 什么是HTML HTML指的是超文本标记语言（Hyper Text Markup Language），是一种使用标记标签来描述网页的语言。 超文本 : 文字+图片+音视+链接… 标记 : 浏览器根据已定义好的某一对标签来显示对应的内容 语言 ：一门计算机语言 最重要的三项技术： HTML核心规范 CSS（层叠样式表） JavaScript HTML5新特性： 引入原生多媒体支持 映入可编程内容（例如：画图） 引入了语义Web HTML页面的基本结构： [外链图片转
【前端入门】HTML5
赵啸天的博客
02-12 288
一、基础概念 W3C标准： 结构化标准语言——HTML,XML 表现标准语言——CSS 行为标准——DOM,ECMAScript 行内元素和块元素 块元素：总会另起一行放内容的 行元素：可以好多元素放在一行内的 二、页面结构 结构 用途 header 标题头部区域的内容（用于页面或页面中的一块区域） footer 标记脚步部区域的内容（用于整个页面或页面中的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用（常用
前端HTML5基础
qq_53030245的博客
08-02 314
准备阶段： 前端软件：visual studio code 笔记软件：Typora 安装插件： 目录 准备阶段： 标签： 特殊符号： 图片 音频标签 视频标签 标签： <p>介绍常用标签p</p> <b>文本加粗标签b</b> <i>斜体标签i</i> 一般强调标签(斜体)em <a href="跳转的页面名称">超链接标签a</a> <.
前端---Html5通用
天才周的博客
07-07 204
&lt;!DCCTYPE html&gt;   &lt;html&gt;      &lt;head&gt;   &lt;title&gt;标题&lt;/title&gt;   &lt;meta charset ="utf-8" content ="text/html"/&gt;      &lt;/head&gt;      &lt;body&
大前端 （一） -- HTML5入门
怪咖先森的博客
05-08 917
暂定要学的前端内容为： HTML5 负责页面的结构和语义。比如，页面的标题，页面的区域划分，语义化标签等等都是由HTML来实现的。 CSS3 负责页面的样式。比如，背景颜色，文本的大小，边框等等与样式相关的部分都由CSS承担 JavaScript 负责页面的行为和交互。比如，点击按钮后改变文本颜色，计算两个数据的相加，存储数据等等；这些都是由JavaScript负责。 ...
web前端知识梳理——HTML5(一)
不学不行
07-07 1832
一.Web基础知识(了解)   web与Internet  1.Internet  全球性计算机互联网络,简称因特网,互联网,交互网.  2.Internet上的应用程序    1.c/s  --可执行的桌面应用程序,需要下载安装更新      c:client客户端        s:server服务器    2.b/s ---类似京东       b:browser浏览器       s:se...
HTML5前端开发与设计基础
"Web Development and Design Foundations with HTML5 8E" 是一本由TerryAnn Felke-Morris编著的教育书籍，主要针对前端开发初学者，涵盖了HTML5、CSS、JavaScript、JQuery等核心技术。 本书详细讲解了Web开发与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值