HTML

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

HTML

1. 概念：是最基础的网页开发语言
	* Hyper Text Markup Language 超文本标记语言
		* 超文本:
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
		* 标记语言:
			* 由标签构成的语言。<标签名称> 如 html，xml
			* 标记语言不是编程语言

2. 快速入门：
	* 语法：
		1. html文档后缀名 .html 或者 .htm
		2. 标签分为
			1. 围堵标签：有开始标签和结束标签。如 <html> </html>
			2. 自闭和标签：开始标签和结束标签在一起。如 <br/>

		3. 标签可以嵌套：
			需要正确嵌套，不能你中有我，我中有你
			错误：<a><b></a></b>
			正确：<a><b></b></a>

		4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
		5. html的标签不区分大小写，但是建议使用小写。

	* 代码：
		<html>
		
			<head>
				<title>title</title>
			</head>
			
			<body>
				<FONT color='red'>Hello World</font><br/>
				
				<font color='green'>Hello World</font>
			
			</body>
	
		</html>

3. 标签学习：
	1. 文件标签：构成html最基本的标签
		* html:html文档的根标签
		* head：头标签。用于指定html文档的一些属性。引入外部的资源
		* title：标题标签。
		* body：体标签
		* <!DOCTYPE html>：html5中定义该文档是html文档
	2. 文本标签：和文本有关的标签
		* 注释：<!-- 注释内容 -->
		* <h1> to <h6>：标题标签
			* h1~h6:字体大小逐渐递减
		* <p>：段落标签
		* <br>：换行标签
		* <hr>：展示一条水平线
			* 属性：
				* color：颜色
				* width：宽度
				* size：高度
				* align：对其方式
					* center：居中
					* left：左对齐
					* right：右对齐
		* <b>：字体加粗
		* <i>：字体斜体
		* <font>:字体标签
		* <center>:文本居中
			* 属性：
				* color：颜色
				* size：大小
				* face：字体

		* 属性定义：
			* color：
				1. 英文单词：red,green,blue
				2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
				3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
			* width：
				1. 数值：width='20' ,数值的单位，默认是 px(像素)
				2. 数值%：占比相对于父元素的比例

		* 案例：公司简介
			<!DOCTYPE html>
			<html lang="ch">
			<head>
			    <meta charset="UTF-8">
			    <title>黑马程序员简介</title>
			</head>
			<body>
			
			<h1>
			    公司简介
			</h1>
			<hr color="#ffd700">
			
			<p>
			<font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
			</p>
			
			<p>
			目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
			</p>
			
			<p>
			
			黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
			中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
			</p>
			
			<p>
			
			一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
			</p>
			
			<hr color="#ffd700">
			
			<font color="gray" size="2">
			    <center>
			        江苏传智播客教育科技股份有限公司<br>
			        版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
			    </center>
			</font>

​
​
​
3. 图片标签：
* img：展示图片
* 属性：
* src：指定图片的位置

		* 代码：
			 <!--展示一张图片 img-->

		    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
		
		    <!--
		        相对路径
		            * 以.开头的路径
		                * ./：代表当前目录  ./image/1.jpg
		                * ../:代表上一级目录
		     -->
		
		    <img src="./image/jiangwai_1.jpg">
		
		    <img src="../image/jiangwai_1.jpg">
	4. 列表标签：
		* 有序列表：
			* ol:
			* li:
		* 无序列表：
			* ul:
			* li:
	5. 链接标签：
		* a:定义一个超链接
			* 属性：
				* href：指定访问资源的URL(统一资源定位符)
				* target：指定打开资源的方式
					* _self:默认值，在当前页面打开
					* _blank：在空白页面打开

		* 代码：
			 <!--超链接  a-->

		    <a href="http://www.itcast.cn">点我</a>
		    <br>
		
		    <a href="http://www.itcast.cn" target="_self">点我</a>
		    <br>
		    <a href="http://www.itcast.cn" target="_blank">点我</a>
		
		    <br>
		
		    <a href="./5_列表标签.html">列表标签</a><br>
		    <a href="mailto:itcast@itcast.cn">联系我们</a>
		
		    <br>
		    <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
	6. div和span：
		* div:每一个div占满一整行。块级标签
    	* span：文本信息在一行展示，行内标签 内联标签

	7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
		1. <header>：页眉
		2. <footer>：页脚


	8. 表格标签：
		* table：定义表格
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格的距离
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
			* bgcolor：背景色
			* align：对齐方式
		* tr：定义行
			* bgcolor：背景色
			* align：对齐方式
		* td：定义单元格
			* colspan：合并列
			* rowspan：合并行
		* th：定义表头单元格
		* <caption>：表格标题
		* <thead>：表示表格的头部分
		* <tbody>：表示表格的体部分
		* <tfoot>：表示表格的脚部分

HTML标签：表单标签

* 表单：
	* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
	* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        * 属性：
            * action：指定提交数据的URL
            * method:指定提交方式
                * 分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

        * 表单项中的数据要想被提交：必须指定其name属性

​
​ * 表单项标签：
​ * input：可以通过type属性值，改变元素展示的样式
​ * type属性：
​ * text：文本输入框，默认值
​ * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
​ * password：密码输入框
​ * radio:单选框
​ * 注意：
​ 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
​ 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
​ 3. checked属性，可以指定默认值
​ * checkbox：复选框
​ * 注意：
​ 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
​ 2. checked属性，可以指定默认值
​
* file：文件选择框
* hidden：隐藏域，用于提交一些信息。
* 按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径

		   * label：指定输入项的文字描述信息
			   * 注意：
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素：option，指定列表项
			
		* textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。

案例：旅游网站首页

1. 确定使用table来完成布局	
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
	<tr>
		<td>
			<table></table>
		</td>
	</tr>

4. 代码实现

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>黑马旅游网</title>
	</head>
	<body>
	
	    <!--采用table来完成布局-->
	    <!--最外层的table，用于整个页面的布局-->
	    <table width="100%" align="center">
	       <!-- 第1行 -->
	        <tr>
	            <td>
	                <img src="image/top_banner.jpg" width="100%" alt="">
	            </td>
	        </tr>
	
	        <!-- 第2行 -->
	        <tr>
	            <td>
	                <table width="100%" align="center">
	                    <tr>
	                        <td>
	                            <img src="image/logo.jpg" alt="">
	                        </td>
	                        <td>
	                            <img src="image/search.png" alt="">
	                        </td>
	                        <td>
	                            <img src="image/hotel_tel.png" alt="">
	                        </td>
	                    </tr>
	                </table>
	
	            </td>
	        </tr>
	
	        <!-- 第3行 -->
	        <tr>
	            <td>
	                <table width="100%" align="center">
	                    <tr bgcolor="#ffd700" align="center" height="45" >
	                        <td>
	                            <a href="">首页</a>
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	
	                        <td>
	                            门票
	                        </td>
	                    </tr>
	                </table>
	            </td>
	        </tr>
	
	        <!-- 第4行 轮播图 -->
	        <tr>
	            <td>
	                <img src="image/banner_3.jpg" alt="" width="100%">
	            </td>
	        </tr>
	
	        <!-- 第5行 黑马精选-->
	        <tr>
	            <td>
	                <img src="image/icon_5.jpg" alt="">
	                黑马精选
	                <hr  color="#ffd700" >
	            </td>
	        </tr>
	
	        <!-- 第6行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td>
	
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_1.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 899</font>
	                        </td>
	                    </tr>
	                </table>
	            </td>
	        </tr>
	
	        <!-- 第7行 国内游 -->
	        <tr>
	            <td>
	                <img src="image/icon_6.jpg" alt="">
	                国内游
	                <hr  color="#ffd700" >
	            </td>
	        </tr>
	
	        <!-- 第8行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td rowspan="2">
	                            <img src="image/guonei_1.jpg" alt="">
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="" height="100%">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                    </tr>
	
	                    <tr>
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_2.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>

​
​
​
​
​
​




境外游



	        <!-- 第10行 -->
	        <tr>
	            <td>
	                <table align="center" width="95%">
	                    <tr>
	                        <td rowspan="2">
	                            <img src="image/jiangwai_1.jpg" alt="">
	                        </td>
	
	                        <td>
	
	                            <img src="image/jiangxuan_3.jpg" alt="" height="100%">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	                    </tr>
	
	                    <tr>
	                        <td>
	
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>
	
	                        <td>
	
	                           <img src="image/jiangxuan_3.jpg" alt="">
	                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
	                            <font color="red">&yen; 699</font>
	                        </td>

​
​
​
​
​
​
​
​
​
​
​




江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882


	    </table>

​
​

qq_41156186
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb登录页面
07-04
暑期实训第三天，javaweb实现静态登录页面与后台用户名数据的匹配。
2、Javaweb_HTML:表单&CSS:页面美化和布局控制
qq1092881420的博客
01-08 1105
label的for属性一般会和 input 的 id属性值 对应。* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一。* 语法： 元素名称[属性名="属性值"]{}
简单的登录页面—基于javaweb和mysql数据库
chenxingxingxing的博客
03-18 3484
简单的登录页面—基于javaweb和mysql数据库
JAVA WEB----完整的登陆界面前端优化
a1422346935的博客
05-23 3581
做完了之前的登陆界面后，我们要优化界面，使界面看起来，更加美观 第一步：去网站上下载Adminlte官网上下载框架 第二步：选择要使用的页面 把login.jsp和dist和plugins移动到idea后运行程序 第三步：修改使用的页面的代码 把login.jsp和dist和plugins移动到idea后运行程序 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> &l
java web 18种登录页面模板
05-28
登录模板，java web 18种登录页面模板，很好很强大
圣诞树HTML.html
12-17
圣诞树HTML，下载点击即可使用，表白神器
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
ECharts+html展示大屏模板30多套
12-18
ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷，几乎涵盖目前市面上所有常见模板。 ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷，几乎涵盖目前市面上...
一套后台管理html模版
08-04
在页面 http://www.cnblogs.com/strick/p/3884797.html 有一些说明
JavaWeb—HTML
夏日漱石的博客
03-07 702
JavaWeb—HTML，前端
javawebJSPHTML的区别
weixin_43942210的博客
09-26 570
javaweb
JavaWeb—HTML基础与标签使用
weixin_61843013的博客
06-24 1023
HTML标签的使用
JAVA WEB介绍和HTML的分类使用
green5858的博客
08-17 508
JAVA WEB的介绍 分类 针对后端人员来说，我们现在只需要大概了解前端的基本知识就可以了，同时也会简单操作。 java WEB：分为HTML、CSS、JAVAScript 1.HTML:构建整个页面的基本框架以及内容。 2.CSS：控制html页面样式。 3.JS：控制页面的动态效果。（javaScript） HTML 1.简单介绍 超文本标记语言，超文本就是指页面可以包含图片、链接，甚至音乐、程序等非文字元素。分为==“头部分”和“主体部分”==，“头部分”提供关于网页信息，主体部分提供网页具体内容。
java学习篇——Javaweb ：HTML基本（我们是后端）
zhang19971014的博客
04-06 756
简单介绍： ——————HTML页面—————— 作用：负责搭建页面内容和结构。 HTML:HyperTextMarkupLanguage —— 超文本标记语言 超文本：不是只有文字。 基本操作： 新建maven项目，将src删除，新建Web文件夹。新建day01文件夹。新建01文本标签html页面。 标题标签：<h1>内容标题1</h1>——————————内容加粗，间隔固定，独占一行。 水平分割线：<hr> 换行：<br>协..
一个简单美观的前端登录界面
热门推荐
u012947276的博客
01-18 6万+
在 webRoot目录下创建css文件夹 直接引入  style.css文件：body{    background: url("../img/1.jpg");    animation-name:myfirst;    animation-duration:12s;    /*变换时间*/    animation-delay:2s;    /*动画开始时间*/    animation-ite
java html 区别是什么意思_html跟java HTML和JAVA有什么区别？
weixin_39578867的博客
02-25 861
java应该说是编程语言吧，但总是听说他也可以编写网页，是不是啊，如是Java是一种面向对象编程语言像C,Basic一样，但各有各的特点。两者本质不一样。 在JSP中，可以用HTML做数据展现，Java做服务器端逻辑处理，JAVA等语言可以理解成主要是负责动态编程的，与数据库连接，组织网页内容等. html是超文本标记语言Hyperjava，html和javascript之间是什么关系？先应该学j...
javaweb是什么？
weiyuyang250的博客
10-29 2万+
1、 前台：呈现给用户的视觉和基本的操作。 后台：用户浏览网页时，我们看不见的后台数据跑动。后台包括前端、后端。 前端：对应我们写的html、css、javascript 等网页语言作用在前端网页。 后端：对应jsp、javaBean、dao层、action层和service层的业务逻辑代码。（包括数据库） 为什么jsp是后端呢？主要是jsp的运行原理是在tomcat服务器运行的。 2、 (1)javaweb是java开发中的一个方向 java有搞安卓的，搞web的，搞嵌入式的等。javaweb就是指搞w
html
最新发布
05-29
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。HTML 由各种元素（tags）和属性（attributes）组成，这些元素和属性可以用来定义网页的结构和内容。 HTML 元素通常由一个开始标记和一个结束标记...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值