Html 入门

最新推荐文章于 2021-08-05 14:22:39 发布
最新推荐文章于 2021-08-05 14:22:39 发布
阅读量111 收藏
点赞数
分类专栏： Html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47397104/article/details/112676295
版权

Html 入门

1. Html 简介

  • Hyper Text Markup Language： 超文本标记语言

  • 超文本： 不仅仅是纯文本， 还包括字体相关 以及多媒体内容(图片/音频/视频)

  • XML也是标记语言 ， 区别就是 XML是可扩展标记语言， HTML里面的标签是预设好的，学习HTML实际上就是学习有哪些HTML标签 以及标签和标签之间的关系

  • 第一个Html页面

    <!DOCTYPE html><!--文档声明：告诉浏览器使用html的哪个版本解析页面-->
<html><!--根标签-->
    <head><!--头标签：给浏览器看的内容在头标签里面-->
        <meta charset="UTF-8"><!--设置字符集-->
        <title>Insert title here</title><!--页面标题-->
    </head>
    <body><!--体标签：给用户看的内容写在体标签内-->

    </body>
</html>

    说明：html表示网页的属性，是网页的后缀名。head表示网页的头部。boay表示网页的主体。

2. 如何修改网页

1. 打开浏览器访问网页
2. 按下功能键F12打开源代码
3. 点击弹窗左上角小箭头查找需要修改的元素
4. 在源代码中双击即可修改，按Enter确认

3. 文本相关标签

1. 标题标签

<h1>...<h1>
标题
标题
标题
标题
标题
标题

说明：用此标签括起来的内容在页面上会显示为标题，带有加粗放大的效果，独占一行，自带上下间距（PS: 字体从大往小,最小为h6）

2. 水平分割线hr

<hr>

3. 段落标签

<p>段落标签</p><p>自带换行效果</p>

段落标签

自带换行效果

说明：用此标签括起来的内容会在网页上自称一段，带有换行的效果

4. 换行br

示例<br>结束

示例
结束
说明：在html中不能识别回车，回车只能识别成空格，如果需要换行使用br标签

5. 注释标签

<!--注释内容-->

说明：用此标签对书写代码进行解释说明.注释不会影响页面的代码显示

6. 文字的加粗/倾斜/下划线/删除线

<b>文字的加粗</b>
<i>文字的倾斜</i>
<u>文字的下划线</u>
<s>文字的删除线</s>
<small>小字</small>

文字的加粗
文字的倾斜
文字的下划线
文字的删除线
小字

7. 文字的颜色/大小/背景色/字体

①文字的颜色
<p style="color:red">会自动换行</p>
<span style="color:bule">同一行</span>
<span style="color:purple">不同颜色用span</span>

②文字的大小,单位：px和cm都可以
<p style="font-size:30px">px</p>
<p style="font-size:1cm">cm</p>      
  
③文字的背景色
<p style="background-color:blue;color:yellow">整行都有背景色</p>          
<span style="background-color:green">只有输出字有背景色</span>   
  
④文字的字体
<p style="font-family:楷体">楷体</p>

在这里插入图片描述

4. 列表标签

  • 无序列表ul和li

    <!--type的值为：circle,disc,square 值不同列表的样式不同-->
<ul type="circle"><!-- unordered list -->
	<li>刘备</li><!-- list item列表 项 -->
    <li>关羽</li>
    <li>孙尚香</li>
    <li>诸葛亮</li>
    <li>刘禅</li>
</ul>
<ul type="disc">
	<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>

    在这里插入图片描述

  • 有序列表ol和li

    <!--type值为：1,A,a,I,i 对应不同的排序方式. reversed:表示反向排序-->
<ol type="1" start="10" reversed="reversed"> 
	<li>Java基础</li>
	<li>API</li>
  	<li>Web前端</li>
    <li>数据库</li>
</ol>
<ol type="A" start="1">
	<li>Java基础</li>
	<li>API</li>
	<li>Web前端</li>
	<li>数据库</li>
</ol>
<ol type="I" start="1">
	<li>Java基础</li>
	<li>API</li>
	<li>Web前端</li>
	<li>数据库</li>
</ol>
<ol type="a" start="1">
	<li>Java基础</li>
	<li>API</li>
	<li>Web前端</li>
	<li>数据库</li>
</ol>
<ol type="i" start="1">
	<li>Java基础</li>
	<li>API</li>
	<li>Web前端</li>
	<li>数据库</li>
</ol>

    在这里插入图片描述

  • 列表嵌套： 有序列表和无序列表可以任意无限嵌套

    <ol>
	<li>凉菜
		<ul>
			<li>拍黄瓜</li>
			<li>东北大拉皮</li>
			<li>花毛一体</li>
		</ul>
	</li>
	<li>炒菜
		<ul>
			<li>西红柿炒鸡蛋</li>
			<li>溜肥肠</li>
			<li>鱼香肉丝</li>
		</ul>
	</li>
</ol>

    在这里插入图片描述

5. 图片标签

1.从网络上引入图片
  <img src="图片地址"/>
2.从本地引入图片
  <img src="本地图片名称"/>  例：<img src="哆啦A梦.jpg"/>

3.改变图片尺寸
  <img src="..." height（高度）/width（宽度）="..px/百分比"/>  百分比会随页面大小变动，px是固定大小	 
                  
4.给图片加标题
  <img src="..." title="标题"/>

5.图片无法显示时显示文本
  <img src="哆啦A梦.jpg" alt="图片路径有误"/>
  
6.背景图
  <body background="图片地址/本地图片名称">	    在body旁边加！
  
  
<!--alt按住不动，鼠标下拉。拉多少行就可以同时编辑多行(eclipse中的html页面)
ctrl+h（替换）-->

src路径：

  • 相对路径：访问站内资源
    • 图片和页面同一目录： 直接写图片名
    • 图片在页面的上级目录： …/图片名，上级的上级就再加一个…/
    • 图片在页面的下级目录： 文件夹名/图片名
    • 图片文件夹与页面文件夹在同一目录：…/图片文件名/图片名
  • 绝对路径： 访问站外资源时使用， 称为图片盗链， 节省本站资源，但是有可能找不到图片
  • alt： 图片不能正常显示时显示的文本
  • title： 鼠标在图片上停止移动时显示的文本
  • width/height：设置宽高，两种方式：
    • 像素（XP）
    • 上级元素百分比，如果只设置宽度，高度会自动等比例缩放

6. 网页中的超链接

<a href="地址"target="_blank">...</a><!--target="_blank"是跳转到新页面-->
<center>...</center><!--网页内容居中-->

说明：

  • a表示超链接，href是指定超链接目标的网址
  • 如果超链接不写href属性，则是纯文本效果
  • href类似于img标签的src属性(资源路径)， 指向的路径浏览器如果支持浏览则直接浏览，如果不支持则下载
  • 图片超链接：a标签包裹文本就是文本超链接，包裹图片就是图片超链接
  • 实现页面内部跳转：在目的地位置的元素中添加id，然后在点击的超链接里面添加 href="#xxx" 即可跳转到id对应元素的位置

7.网页中的音频与视频

1.音频

方式一：
<embed height="100" width="100" src="文件" />
<object height="100" width="100" data="文件"></object>
方式二：
<audio controls="controls" height="100" width="100">
<source src="文件" type="audio/mp3" />
<source src="文件名.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
方式三：
<a href="文件">...</a><!--点击跳转到音频-->

2.视频：

<embed src="文件名" height="200" width="200"/>

注：文件与html不在同一路径时需输入文件路径

8. 网页中的表格与表单

表格格式：

<table>
	<caption>标题</caption>
	<tr>
		<th colspan="2">横向合并2个单元格，表头自带加粗效果</th>
	</tr>
	<tr>
     	<td rowspan="2" align="left">纵向合并2g单元格,内容靠左</td>
     	<td></td>				
	</tr>
	<tr>
		<td></td>				
	</tr>
</table>
标题
横向合并2个单元格，表头自带加粗效果
纵向合并2个单元格

说明：
table表格，th表头，tr行，td列，caption表格标题
table的属性：
border=" "边框的大小
cellspacing=" "单元格的间距
cellpadding=" "单元格的边距
td，th的属性：
colspan=" "横向/rowspan=" "纵向，分别表示横向和纵向的单元格合并

表单格式：

<form>
	<!-- 
	type是控件的类型  
	name所有控件都必须写提交数据时的参数名,不写的话不会提交  
	placeholder：占位文本
	value：文本框的值
	readonly：只读--> 
	用户名：<input type="text" name="username" placeholder="请输入用户名" value="abc" readonly="readonly"><br>
	<!-- 密码框和文本框属性通用 -->
	密码：<input type="password" name="password" placeholder="请输入密码 "><br> 
	<!-- 
	单选(radio)和多选(checkbox)必须写value属性
	checked:默认选中
	label:扩大触碰范围 -->
	性别：<input type="radio" name="gender" value="m" id="r1" ><label for="r1">男</label> 
		 <input type="radio" name="gender" value="f" id="r2" checked="checked"><label for="r2">女</label><br>
	<!-- 多选和单选属性通用 -->
	爱好：<input type="checkbox" name="hobby" value="cy">抽烟
		 <input type="checkbox" name="hobby" value="hj" checked="checked">喝酒
		 <input type="checkbox" name="hobby" value="tt">烫头<br>
	<!-- 日期选择器 -->
	生日：<input type="date" name="birthday"><br> 
	<!-- 文件选择器 -->
	靓照：<input type="file" name="pic"><br>
	<!-- 文本域 rows行 cols列 -->
	自我介绍：<textarea rows="3" cols="30" name="intro" placeholder="说点儿啥..."></textarea><br>
	<!-- 下拉选  selected默认选中-->
	所在城市： <select name="city">
				  <option>请选择</option>	
				  <option value="bj">北京</option>	
				  <option selected="selected" value="sh">上海</option>	
				  <option value="gz">广州</option>	
			  </select><br>
		
	<!-- 提交按钮 -->
	<input type="submit" value="注册">
	<!-- 重置按钮 -->
	<input type="reset" > 
	<!-- 自定义按钮 -->
	<input type="button" value="自定义按钮">
</form>

说明：表单作用：获取用户输入的各种信息，并将信息提交给服务器
常见的type取值

text文本框
password密码框
date日期框
email邮件框
submit提交框
file文件框
radio单选框
checkbox多选框
reset重置框

9. 分区标签

  • 可以把分区标签理解成是一个容器,作用就是将多个有相关性的标签放在同一个分区标签中, 便于统一管理

  • 常见的分区标签有div和span

    • div: 块级分区元素: 独占一行
    • span:行内分区元素: 共占一行

  • 如何对页面进行分区? 页面至少分为三大区,每个大区里面有多个小的分区

    <div>头</div>
<div>正文</div>
<div>脚</div>

  • html5标准中根据分区的作用新增了一些分区元素，目的是为了提高代码的可读性，包括：header/article/section/footer/nav导航区域

    <header>头</header>
<article>正文</article>  <section></section>
<footer>脚</footer>

10.实体引用(特殊字符)

<!--空格：如果html页面中连续出现多个空格,只能识别一个,这称为空格折叠现象, &nbsp;
	小于号和大于号: &lt; 和 &gt;
-->
空&nbsp;&nbsp;&nbsp;格
&lt; 和 &gt;

空   格
< 和 >

​

沉默的羔羊丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML学习总结
09-16
学习前端，HTML、CSS是必不可少的基础内容，但是有太多的标签需要记忆，初学者可能因此而感到烦恼，这也是我在学习过程中的一些感受，通过这段时间的努力学习，我将这段时间所学的内容进行了一番总结，希望对初学者看了这篇文档后有所帮助
html总结与理解，自己的心得
chen983234416的博客
11-14 9128
    首先什么是html，它用来做什么，他有什么用 html是个缩写，全名为HyperText  Markup Language，中文名字叫做，超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。     接下来我解释下什么叫做超文本，什么叫做标记，什么叫做语言，什么叫做静态网页，动态网页，什么是浏览器解析标记 1、超文本：顾名...
学习html的心得总结
热门推荐
FLV123的博客
04-19 1万+
经过这几天的学习，已经基本掌握制作静态网站的方法。第一节，老师让我们明白什么是html，为什么要学，该如何学习的三个问题给予我们回答。首先，什么是HTML，html是一种超文本语言，html属于前端技术，学好前端技术也有利于我们就业，但是前端技术，是垂直居中设置入门容易，精通难，需要下非常的功夫，才能学好这门技能。那如何学好html，一，学会翻看参考手册，了解有些属性。如（runoob.com）二
HTML的学习心得
weixin_47223561的博客
03-30 4335
HTML一、HTML简介二、HTML文档结构二、使用步骤1.引入库2.读入数据总结 经过这段时间对HTML的学习，深刻了解了网页的结构和组成以及对网页界面构成的代码有了一定的认识基础，从之前对网页制造的白板认识，到现在能看懂网页代码的大致意思。这让我有了很多收获。 一、HTML简介 （1）超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 （2）HTML 不是一种编程语言，而是一种标记语言 （3）标记语言是一套标记标签 (marku
html学习心得
louderIII的博客
03-13 1427
学习内容： 1.通过这几节课对web应用基础的学习，我在最开始了解到了在学习这门技术的最开始应该下载其开发软件，分别下载了webstorm和Visual Studio Code这两个软件。在下载了VScode后又下载了安装了以下插件，其中包含：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。同时了解到了使用google c
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
最新发布
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
学习html入门
12-24
简单的HTML入门，超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
html总结学习资料
09-29
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。 注释：浏览器会自动地在标题的前后添加空行。 注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
第十五周小组学习中关于HTML的总结与一些心得
qq_53275101的博客
12-12 532
小组HTML学习中的总结与一些心得 1. 前言 在完成了Java基础的学习后，我对于编程有了初步的了解，并且在小组的计划下开始了对前端的初步学习（HTML和CSS），我将写下这篇总结记录下我在HTML学习中对于各个标签的应用的一些个人看法与理解，及其这段时间的学习情况总结。 2. 什么是HTML？ HTML指超文本标记语言: HyperText Markup Language，是一种描写网页的语言。它是一种标记语言，其表现形式主要为用一组一组的标签来对网页进行描写。 3. HTML标签 HTML标签的主要形
HTML学习心得
lxy13608322474的博客
03-09 1267
目录一、什么是HTML二、如何撰写 HTML 文档 一、什么是HTML HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来
html java实训心得,学习中关于HTML的总结与一些心得
weixin_39743622的博客
06-09 804
学习中关于HTML的总结与一些心得2020年12月12日|萬仟网IT编程 |我要评论小组HTML学习中的总结与一些心得1. 前言在完成了Java基础的学习后，我对于编程有了初步的了解，并且在小组的计划下开始了对前端的初步学习(HTML和CSS)，我将写下这篇总结记录下我在HTML学习中对于各个标签的应用的一些个人看法与理解，及其这段时间的学习情况...
关于html的学习心得体会总结（7月31日至8月4日）
qq_51272418的博客
08-05 1682
说明：本文之中涉及到<h.>的文件全部都是无点的，因为无点的这个符号在csdn里面好像是个特殊符号，我打不出来 1.关于标题（html的标题） 如图所示 非常清晰地点明了html的标题其实是有六个标签来搞的，而不同的<h➕数字>中不同的数字会有不同的格式（而数字只有一到六，到七之后便无了） 如图：数字越大则其默认格式相对字体会变得越大。 （不仅在于字体大小与字体种类，更多的是在于其自带的换行符） 如下图所示 由图片中可以看出来其实<h7. >符号和<h.&g
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
html学习心得一
fengqing0527的博客
12-07 1万+
菜鸟的心得体会~
ABAP-GUI的导出到excel的系统自带按钮
weixin_42559610的博客
09-11 830
按钮&XXL
关于html的一些心得和总结!
lfl1994的博客
03-10 708
一. C/S架构和B/S架构 C/S: client/server  客户端服务器架构 B/S: browser/server  浏览器服务器架构 优势: C/S: 1.需要下载,安装    2.服务器和客户端都需要更新  3.开发维护成本高  B/S: 1.不需要下载,安装  2.只需要更新服务器          3.开发维护成本低 二. 浏览器访问服务器的方式 http
html入门基础知识
10-08
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签被用来定义和呈现网页的内容和结构。HTML中的基本概念包括标签、元素、属性和文本内容。 标签是用尖括号括起来的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值