01前端第一章HTML

最新推荐文章于 2024-07-25 11:52:08 发布

褚哲希

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量405

点赞数

分类专栏：前端笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_51996043/article/details/123085616

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javaWeb：web作为前端界面，java语言作为后端，以前web和java是写在同一个项目中的。

如今，前后端分离开发。

HTML概述

HTML指的是超文本标记语言（HyperText Markup Language）

超文本：是指网页中的内容（超链接，图片，视频……）
标记（标签）：网页是由浏览器解释执行的，需要使用标签来告诉浏览器该如何显示。

买东西，东西上有标签，介绍商品名称、价格……

学习html就是学习各种不同的标签，需要使用标签来告诉浏览器该如何显示。

<a href="http://www.baidu.com"> 百度 </a>
<b>新浪</b>

HTML基本语法

用到开发工具，效率高，创建一个web项目。

<!-- 
  ctrl+shift+/ 生成注释
  <!DOCTYPE html>  声明html语言的版本，主要是告诉浏览器，使用html的哪个版本为标准，来解析网页
  !DOCTYPE html   表示html5的版本
 -->
<!DOCTYPE html> 
<!--
   <html> 是网页的根标签，所有内容都需要写在此标签中。标记语言必须有一个根标签
        <head> 网页的头
	        <meta charset="utf-8" /> 设置网页的字符集  utf-8支持各个国家的语言
	        <title></title> 网页的标题
		    <link href="" rel="icon"/>  标题处的图标  rel="icon"指明文件类型
		    <menu name="keywords" content="手机，家电"> 让搜索引擎来使用的
        </head>
		<body>
			body是网页的身体 网页中显示的内容都写在此标签中
		</body>  
   </html> 
 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度一下，你就知道</title>
		<!-- icon 表示图标 -->
		<link href="" rel="icon"/>
		<menu name="keywords" content="手机，家电">
		<style type="text/css">	
		</style>
		<script type=""></script>
	</head>
	<body>
		
	</body>
</html>

<body text="black" bgcolor="beige">
<!-- 
   标签：每一个标签都拥有一个特定的功能，语言中已经定义好的
        <标签名>标签的内容</标签名>
        <开始标签></结束标签>   闭合标签（封闭区间） 双标签
        <标签名 属性/>  自闭和标签，没有要修饰的内容，只是完成某种功能  单标签
                    <br/>  换行

   标签属性：属性就是标签的特性，可以通过属性来设置标签的表现形式。
        <body text="black" bgcolor="beige">  为文本设置颜色，为其设置背景颜色
        语法：属性必须写在开始标签中	
        一个标签可以有多个属性
        属性语法：属性名=“属性值”

    将html的基本语法就搞定了
    接下来就是学习标签		
 -->
<b>百度</b> <br/>新浪
</body>

常用标签

基本常用标签

标题标签

……

段落标签

+ 换行标签

<!--
    html标签是网页的骨架，所有的关于网页样子的修饰，css是专门修饰网页外观的语言
     标题标签 标签级别只到h6
        <h1></h1>
        <h2></h2>
        <h3></h3>
        align="center" 控制文字在标签行内的水平位置，值=left（默认），right，center
     段落 <p></p>
     换行 <br/>
     列表 <ol>
            <li>
            </li>
          </ol>	
          <ul></ul> 网页上表示一块区域
-->
<h1 align="center">一级标题 居中</h1> 
<h2 align="right">二级标题 靠右</h2>
<h3>三级标题</h3>
<p align="center">
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<p>
HTML 使用超级链接与网络上的另一个文档相连，<br/>通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>
<p>HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
</p>

列表

无序列表
有序列表

<!-- 
  列表  <ol>  有序列表
        <li>列表内容</li>
        <ul> 无序列表 前面没有序号的，有个默认的图标，后期使用css替换图标
        <ul></ul> 网页上表示一块区域

 -->
<ul>
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
</ul>
<ol type="A">
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
</ol>

超链接

<!-- 
<a href="">百度</a>
a超链接
href="" 指定链接地址，必须要有
target="_blank" 在新窗口打开连接地址，默认是当前窗口打开
 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

超链接锚点

<a name="top"></a> <!-- 定义一个顶部的锚点 -->
<a href="#p1">商品1</a>
<a href="#p2">商品2</a>
<a href="#p3">商品3</a>
<a href="#p4">商品4</a>
<a href="#p5">商品5</a>
<h3><a name="p1">商品1</a></h3>
<img src="img/1.png" />
<h3><a name="p2">商品2</a></h3>
<img src="img/2.png" />
<h3><a name="p3">商品3</a></h3>
<img src="img/3.png" />
<h3><a name="p4">商品4</a></h3>
<img src="img/4.png" />
<h3><a name="p5">商品5</a></h3>
<img src="img/5.png" />
<br />
<a href="#top">返回顶部</a>

图像标签

<!-- 
使用img标签在网页中插入图片，只是引用图片的地址
src="图片地址" 
width="150" height="100" 宽高
border="1" 边框
 -->
<a href="http://www.hao123.com">
    <img src="img/hao123.png" width="150" height="100" border="1"/>
</a>

表格

<!-- 
表格：表格不仅是可以放数据的，早期的表格可以用来网页布局
<table> 表格标签
<tr> 表格的行 table rol
<th> 表格的单元格（表头）表格中的数据都必须放在单元格中 表头内容加粗居中
<td> 表格的单元格（普通）
border="1" 边框
background="../img/1.png" 背景图片
bgcolor="cornsilk" 背景颜色
表格默认是有内容的大小决定的，也可以通过width、height设置
align="center" 控制单元格水平对齐
valign="bottom" 控制单元格垂直对齐
cellpadding="10" 设置的是内容到边框的距离，称为内边距
cellspacing="0"  设置单元格与单元格之间的距离
 -->
<table border="1" bgcolor="cornsilk" height="150" width="300" cellpadding="10" cellspacing="0">
    <tr align="center">
        <th>姓名</th>
        <th>数学</th>
        <th>语文</th>
        <th>英语</th>
        <th>计算机</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>99</td>
        <td>97</td>
        <td>88</td>
        <td>88</td>
    </tr>
    <tr align="center">
        <td valign="bottom">李四</td>   <!-- 靠底部-->
        <td valign="top">99</td>        <!-- 靠顶部-->
        <td>97</td>
        <td>88</td>
        <td>88</td>
    </tr>
    <tr >
        <td>王五</td>
        <td>99</td>
        <td>97</td>
        <td>88</td>
        <td>88</td>
    </tr>
</table>

表格合并

<!-- 
table>tr*4>td*5 + tab键     快速生成表格
colspan="合并数量"  跨列合并  合并后记得删除多余的单元格
rowspan="合并数量"  跨行合并  合并后记得删除多余的单元格
 -->
<table border="1" width="500" height="200" >
    <tr>
        <td></td>
        <!-- 跨列合并 -->
        <td colspan="2"></td> <!-- 用一个合并了两个单元格-->
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <!-- 跨行合并 -->
        <td rowspan="3"></td> 
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表单

<!-- 
表单：表单中有很多可以输入或选择的组件，用户可以在表单中输入信息，最终将表单数据提交到服务器
    为后端的程序收集数据。
form表单
action="提交服务器地址" 
method="http请求提交数据的方式 get、post、delete、put"

表单中的组件：
input type="text" 单行文本框组件，不能换行
name="" 向服务器端提交数据的键
value="" 向服务器端提交数据的值
placeholder="" 提示信息，不是组件的值
readonly="readonly" 只读  可以向服务器端提交
disabled="disabled" 禁用  禁用组件后，不会再向服务器端提交数据
type="password"  密码框组件
type="radio" 单选组件必须设置name，name属性相同的为一组，可以实现互斥
             选择性组件，需要给设置默认的value
             checked="checked" 默认选择效果
type="checkbox" 多选/复选框	
<select name="pro">  下拉选择框
        <option value="101">北京</option> 选项
</select>		
type="file" 文件选择框 
<textarea rows="5" cols="30"></textarea> 多行文本框
 -->
<form action="" method="get">
    账号<input type="text" name="qq" placeholder="请输入账号" readonly="readonly"/>
    账号<input type="text" name="qq" placeholder="请输入账号" disabled="disabled"/>
    <br>
    账号<input type="text" name="qq" placeholder="请输入账号"/>
    密码<input type="password" /><br/>
    性别<input type="radio" name="gender" value="男" checked="checked"/>男
        <input type="radio" name="gender" value="女"/>女
        <br>
    爱好<input type="checkbox" name="hobby" value="运动" checked="checked"/>运动1
        <input type="checkbox" name="hobby" value="运动" />运动2
        <input type="checkbox" name="hobby" value="运动" />运动3
        <input type="checkbox" name="hobby" value="运动" />运动4
        <br>
    省份<select name="pro">
            <option value="101">北京</option>
            <option value="102">天津</option>
            <option value="103">上海</option>
        </select><br>	
    照片<input type="file" /><br>
    备注<textarea rows="5" cols="30" name="mark">默认</textarea><br>

    <!-- 
    按钮组件：
    type="submit" 提交按钮，触发表单
    type="reset"  重置表单，让我们的表单回到默认的状态
    type="button" 普通按钮，可以用来触发事件，可以通过事件调用js函数
     -->
    <input type="submit" value="保存"/> 
    <input type="reset" />
    <input type="button" value="按钮" onclick="alert()"/>
</form>

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		内联框架：在窗口中嵌入一个子集的窗口，并在窗口中可以指定页面地址 
		使用<iframe>标签
		    frameborder="" 边框
		<a href="" target="_self">百度</a>
		    target="_self"  默认在当前窗口打开
			target="_blank" 在新窗口打开
			target="自定义窗口名称" 在指定窗口打开
			target="_parent" 在父级/上一级窗口打开
			target="_top" 在最顶级窗口打开
		 -->
		index
		<a href="baidu.html" target="demo">百度</a>
		<a href="qq.html" target="demo">腾讯</a>
		<iframe src="child.html" name="demo" width="300" height="500" frameborder="1"></iframe>  <!-- 窗口-->
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		child
		<a href="baidu.html" target="_parent">百度</a>
		<a href="qq.html" target="_top">腾讯</a>
		
		<iframe src="child1.html" width="" height=""></iframe>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		child1
		<a href="baidu.html" target="_parent">百度</a>
		<a href="qq.html" target="_top">腾讯</a>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		QQ
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		百度
	</body>
</html>

特殊符号转义

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。

例如： 会被解析为b标签，空格,再多的空格都会当一个空格处理。

为了可以使用这些预留字符，我们必须在html中使用字符转义。

<!-- 小于、大于、空格 -->
&lt;b&gt;标签的功能是&nbsp;&nbsp;加粗文字
<!-- 注册商标-->
&reg; 
<!-- 版权 -->
&copy;
<!-- 商标 -->
&trade;

褚哲希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01前端第一章HTML

javaWeb：web作为前端界面，java语言作为后端，以前web和java是写在同一个项目中的。如今，前后端分离开发。HTML概述HTML指的是超文本标记语言（HyperText Markup Language）超文本：是指网页中的内容（超链接，图片，视频……）标记（标签）：网页是由浏览器解释执行的，需要使用标签来告诉浏览器该如何显示。买东西，东西上有标签，介绍商品名称、价格……学习html就是学习各种不同的标签，需要使用标签来告诉浏
复制链接

扫一扫

专栏目录