1.HTML基础样式

最新推荐文章于 2024-05-19 01:30:07 发布
最新推荐文章于 2024-05-19 01:30:07 发布
阅读量146 收藏
点赞数 1
分类专栏： java基础（前后端） 文章标签： html css 前端
王锡豪
本文链接：https://blog.csdn.net/wang121213145/article/details/121056153
版权

文章目录

HTML网页设计

HTML01

本章目标

1.HTML概述
2.常用基本标签
1.什么是HTML

​ 超文本标记性语言 标签代码 双标签(成对出现) 单标签

​ 超级文本 视频 音频 超链接 图片

​

看JFK就里的凯撒

标签/标记/元素 双标签

​ 规范，标准。

2.为什么需要HTML

​ 设计网页。

​ 前端：html css js jq 网页。

​ 后台：服务器

3.开发工具editplus
4.HTML基本结构
<!doctype html> ! 声明 doc document 文档  type类型  h5 页面解析按照html5的规范解析  
<html lang="en"> 根标签  language  语言  english
 <head>头部分  页面的配置文件  
  <meta charset="UTF-8"> 元数据   charset字符集   UTF-8 中文字符集  防止乱码
  <title>Document</title> 标题标签 页面的标题
 </head>
 <body>网页的主体内容  写代码写在body中
  阿桑的歌但是公司的
  <h1>阿桑的歌但是公司的</h1>
 </body>
</html>
注释：ctrl+/

第二节：HTML常用标签

1.标签的格式：

<标签名 标签属性=“属性值”>标签体（可以嵌套标签）</标签名> 双标签

<标签名 标签属性=“属性值” />
单标签

标签属性不能乱写。是属于标签的特性，带有什么用什么，没有的提供不能乱写。

注意：学习HTML就是学习标签 记住每一个标签的功能/作用

2.常用标签：
2.1 h1–h6 标题标签
  <h1>阿桑的歌但是公司的</h1>
  <h2>阿桑的歌但是公司的</h2>
  <h3>阿桑的歌但是公司的</h3>
  <h4>阿桑的歌但是公司的</h4>
  <h5>阿桑的歌但是公司的</h5>
  <h6>阿桑的歌但是公司的</h6>
2.2 段落p, br换行，hr分隔线
<!-- 空行和空格没有作用 -->
  <!-- 没有首行缩进，有段落间距 -->
  <p>　　噶第三附属公司<br />的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的</p>
  <hr/>分隔线
  <p>分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司</p>
  
  <p>的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的噶第三附属公司的分公司的活动分工和发的</p>
2.3 图像标签img
  <!-- 图像标签：向页面中插入图片 -->
  <!-- 网络图片 -->
  <img src="http://www.baidu.com/img/dong_8e531e8c4c040acdb0c085da1a79179e.gif" />
  
	重点掌握路径
  <!-- 本地图片 -->
  <!-- *** 绝对路径：从 根目录/盘符  开始----》目标文件 -->
  <img src="C:/Users/baijinbao/Desktop/html01/images/7.gif" />
  <!-- *** 相对路径: 从当前位置 开始----》目标文件 -->
  <!-- ./ 表示当前位置。可以不写 -->
  <!-- ../ 表示返回上级目录 -->
  <img src="./../images/7.gif" />
2.4 列表标签

*** 注意代码格式。

<!-- 有序列表 -->
  <ol>
	<li>第一章</li>
	<li>第二章</li>
  </ol>
  <!-- 无序列表 -->
  <ul>
	<li>第一章</li>
	<li>第二章</li>
  </ul>
  <!-- 自定义列表 -->
  <dl><!-- dd是dt中的内容 -->
	<dt>百度</dt>
	<dd>http://www.baidu.com</dd>
	<dd>http://www.baidu.com</dd>
	<dd>http://www.baidu.com</dd>
	<dt>京东</dt>
	<dd>http://www.jd.com</dd>
  </dl>
  <!-- 嵌套列表 -->
  <ul>
	<li>第一章
		<ul>
			<li>第一节
				<ul>
					<li>第一段</li>
					<li>第二段</li>
					<li>第三段</li>
				</ul>
			</li>
			<li>第二节</li>
			<li>第三节</li>
		</ul>
	</li>
	<li>第二章</li>
	<li>第三章</li>
  </ul>
2.5 a标签
<!-- a标签 -->
  <!-- 1.做超链接 -->
  <!-- 网络地址 -->
  <a href="http://www.baidu.com">百度</a>
  <!-- 本地网页 -->
  <a href="123.html">123</a>

  <!-- 2.做锚点 -->
  <a name=""></a>
  <a id=""></a>
  <!-- # 回到顶部 -->
  <a href="#">回到顶部</a>
  <!-- 3.发邮件 -->
  <a href="mailto:邮箱1;邮箱2;..."></a>
  <a href="mailto:347538450@qq.com;">发邮件</a>
2.6 文本标签 font字体 i斜体 b粗体 sup上标 sub下标
<!-- 文本标签 -->
  <font color="red">你好 哈哈哈</font>
  <i>感到翻跟斗</i><!-- 斜体 -->
  <b>很好的发个红包</b><!-- 加粗 -->
  <strong>给当时<sup>1</sup>法国地<sub>2</sub>方官</strong><!-- 加粗 -->
2.7音频audio，视频标签video
<!-- 音频 -->
  <audio src="新二神曲.mp3" controls="controls" autoplay="autoplay">
	<!-- <source src=""></source>
	<source ></source>
	<source ></source>
	<source ></source> -->
	<!-- 视频标签 -->
  </audio>
  <video  width="500px" height="500px" src="书法大师.mp4" controls="controls" autoplay="autoplay">

第三节：table表格

1.表格概述

​ 以行列对齐的方式显示文本和数字信息，还可以固定图片的显示位置。

​ 做数据表格 布局页面 div+css

2.表格结构
<!-- 
	<table></table> 创建表格并且设置表格的相关属性
	<caption></caption> 表格的标题
	<tr></tr>		  表示表格中的每一行
	<td></td>		  表示标准的数据单元格
	

	需求：创建4*4 表格  四行有四个tr   四列每一行中有4个td单元格
  -->
  <table>
	<caption>学生表</caption>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>种族</th>
			<th>婚配</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>冯帅涛</td>
			<td>18</td>
			<td>汉</td>
			<td>未</td>
		</tr>
		<tr>
			<td>杨绪波</td>
			<td>18</td>
			<td>人</td>
			<td>没</td>
		</tr>
		<tr>
			<td>王宁</td>
			<td>16</td>
			<td>汉</td>
			<td>已婚</td>
		</tr>
	</tbody>
  </table>
3.表格属性

			border      边框
			cellspacing 单元格间距
			cellpadding 单元格内填充 内容与边框之间的距离
			width       宽
			height      高
			align       水平方向内容的对齐方式 left左 默认  center中  right右
				如果将align放到table标签中，调整的是表格相对于父元素的位置。
			bgcolor     背景颜色
			background  背景图片  可以加在td中 ，不能写再tr中.
<table border="1" cellspacing="0" cellpadding="0" width="400" height="400" align="center" bgcolor="#FFD060" background="../images/7.gif">
	<caption>学生表</caption>
	<thead>
		<tr height="100">
			<th width="100">姓名</th>
			<th width="100">年龄</th>
			<th width="100">种族</th>
			<th width="100">婚配</th>
		</tr>
	</thead>
	<tbody align="center">
		<tr height="100" align="center" >
			<td>冯帅涛</td>
			<td align="right">18</td>
			<td>汉</td>
			<td>未</td>
		</tr>
		<tr height="100">
			<td>杨绪波</td>
			<td>18</td>
			<td>人</td>
			<td>没</td>
		</tr>
		<tr height="100">
			<td>王宁</td>
			<td>16</td>
			<td valign="top">汉</td>
			<td>已婚</td>
		</tr>
	</tbody>
  </table>
4.表格合并
<!-- 合并单元格  合并几个格  值就等于几
	合并行：rowspan="" 纵向合并 从上---》下
	合并列：colspan="" 横向合并 从左---》右 
  -->
  <table border="1" cellspacing="0" width="400" height="400">
	<tr>
		<td colspan="4"></td>
	</tr>
	<tr>
		<td></td>
		<td rowspan="3"></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td colspan="2" rowspan="2"></td>
	</tr>
	<tr>
		<td></td>
	</tr>
  </table>
5.表格嵌套

表格中再创建表格 要在td标签中创建table

<table border="1" cellspacing="0" width="400" height="400">
	<tr height="100">
		<td colspan="4"></td>
	</tr>
	<tr height="100">
		<td width="100"></td>
		<td width="100" rowspan="3"></td>
		<td width="100"></td>
		<td width="100"></td>
	</tr>
	<tr height="100">
		<td></td>
		<td  colspan="2" rowspan="2">
			<!-- 嵌套：再td中再写一个表格 -->
			<table border="1" width="200" height="200">
				<tr>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr height="100">
		<td></td>
	</tr>
  </table>

杵意
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html基础内容样式
Mr. 亮先生的博客
08-24 741
head 编码格式：让浏览器可以识别中文 作者 关键字：用户搜索的时候可以通过关键字搜索到该网页 网站的描述信息 body h1~h6:标题标签，重要性依次递减，字体默认加粗，一般作为文章的标题使用 p标签：段落标签 换行标签 &nbsp； 牛逼的空格 水平线 < > > " " 引用别人一段话 强调文本为重要文本，字体加粗
html 常用样式
sparkstark的博客
08-06 3582
form表单标签 action属性：设置表单内容提交后的处理程序 method属性：表单内容提交方式，常用值有get和post两种 input标签：输入框 type：设置输入框的类型 text：文本框 password“密码框 radio：单选按钮 checkcbox：复选框 file:文件域 button：普通按钮，结合JS代码一起使用 rest:重置按钮 submit：提交按钮 image：图片按钮 checked属性：可以给单选按钮、复选框设置默认选项 textarea:文本域 select标签：下拉
微信小程序第二章总结
weixin_71277945的博客
03-08 912
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值( networkTimeout)以及配置多个切换页(tabBar)等。该文件在页面中不可缺少。小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示 data中的数据。
前端技术(一)——html、css介绍
最新发布
kejizhentan的博客
05-19 1087
html和css技术详解
HTML 基础知识：HTML 样式标签
新华编程特战队
02-10 2176
在 HTML 文件中编写 CSS 代码的最传统和最常见的方法之一是在 HTML 中使用 style 标签。HTML 中的样式标签是通过在 HTML 文件中直接添加样式表来使用的，该。因此，如果您希望添加一些特定于设备的样式，可以通过将 media 属性添加到样式标记来实现。有两个属性，这两个属性都是可选的。在这里，我有一些最小的 HTML 样板代码，带有可用于设置此 HTML 样式的 style 标签。，除非认为非常必要，因为它们会使您的 HTML 更加混乱，并且您的 CSS 难以调试和维护。
HTML总结
xiangxiongfly
07-21 866
W3C网址 HTML结构说明：根据编写形式，标签可分为两种：根据表现形式，元素可分为两类：标签也叫做元素，叫法不同意思相同。head标签表示页面的“头部”。一般只有6个标签能放在head标签里：title标签定义网页的标题。 meta标签 meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等、SEO等。通常放在最前面。name属性 http-equiv属性定义页面的编码： 定义网页自动刷新跳转： 说明：6秒后自动跳转指定url页面。style标签用于定义CSS样式。 script标签 scri
HTML基础题目.rar
04-08
文件为HTML基础题目，题目如下，欢迎下载，3-1《七步诗》3-2制作Google Logo效果3-3《关山月》3-4通配符选择器3-5CSS字体样式属性3-6春天3-7你若安好便是晴天3-8CSS层叠性3-9CSS优先级3-10制作新浪博客效果
HTML基础与层叠样式单CSS课件
06-21
HTML基础与层叠样式单CSS课件 HTML基础知识点： 1. HTML文档的基本结构：HTML文档由一个<HTML>和</HTML>标记包含，分为和两大部分，页面的标识一般都是在标识中定义的。 2. HTML文档的头元素（HEAD）：每个HTML...
综合案例.html基础
06-12
先讲解HTML5常用标签，接着讲解CSS3常见样式，主要学习盒子模型，浮动，定位还有高级布局技巧，之后讲解HTML5和CSS3提高，讲解新增加的新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果。
HTML基础知识点总结 .doc
11-21
本篇总结涵盖了HTML的基础知识点，主要分为三个章节，分别是HTML文档结构、元素标签及样式控制、以及表单处理。 **一、HTML文档结构** HTML文档通常由`<!DOCTYPE>`声明开始，用来指定文档使用的HTML版本。接着是`...
HTML06样式基础.zip
11-10
【HTML06样式基础】是关于网页设计中样式基础的教程资料，主要涵盖了HTML文档的样式应用，旨在提升用户对网页样式的理解和控制能力。在这个压缩包中，通过一系列的图片示例（如01.PNG至07.PNG）和作业要求（作业要求...
网页样式文件
07-11
网页样式文件，一个logo
Html中样式介绍
GuessHat的博客
05-14 2284
1.字体样式： 大小 font-size:20px; 粗细 font-weight；bold; 字体 font-family:“楷书”; 风格斜体 font-style:italic; 2.文本样式： 首行缩进： text-indent:20px; 文本针对当前容器居中 text-align: center; 设置行高 line-height:26px; 设置装饰 下划线 text-decoration: underline; 3.a标签的伪类样式 鼠标单击签 a:link{
html 字的样式,html基础介绍、基础标签以及文字样式
weixin_34835735的博客
06-11 208
HTML基本介绍：html作为文件后缀名，就可以让文件变成网页，可以用浏览器所打开;实际，html是一门编程语言，叫做《超文本标记语言》;html的作用，就是制作网页;标记：html这门语言的基本组成单元 ,大部分都有开始和结束的区别注意：把文件的后缀名改成doc 就会变成window文件，改成txt,就会变成文本文件格式： --开始标记 --结束标记DW简介：一般不用实时视图，常用代码，拆分，设...
WXSS
齐枫的博客
09-23 9901
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 样式导入 尺寸单位 rp
css文件修改后，网页样式不变
风之云的博客
08-16 1万+
今天碰到了如题的情况，解决办法很简单， case1:   直接快捷键ctrl+F5，清除浏览器网页缓存cache就okay啦。   case2:   最近又发现另外一种错误会导致刷新不成功问题，就是个人在css中定义的类，最开始的点输入不正确，不是点与句号的区别，而是全角点与半角点的区别。 .．．．．．．．．．．．．．．．．．．．．．．．．．．//全角点 .................
html基本格式
热门推荐
yzyggu的博客
04-16 2万+
html基本格式 <!DOCTYPE HTML><!--这是HTML5的文档声明--> <html><!--这是html的开始标签--> <head><!--这是设置网页标签,html的编码设置,以及标题和链接资源都写在这里--> <!--这是设置移动端观看时,网页不缩放--> ...
HTML基础：超文本传输与ul.html应用
本资源主要介绍了HTML基础中的核心概念和技术细节，特别是关于"ul.html"的显示结果。首先，它讲述了万维网（WorldWideWeb，简称Web）的发展历程，从1989年欧洲核子研究组织（CERN）的物理学家Tim Berners-Lee提出Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杵意

谢谢金主打赏呀！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值