HTML

<!DOCTYPE html>
<!--html5声明-->
<html>
	<head>
		<title> </title>
		<meta charset="utf-8" />
        <!--设置字符集-->
		<meta name="description" content=""/>
        <!--告诉搜索引擎你的站点的主要内容-->
        <meta name="keywords" content=""/>
        <!--向搜索引擎说明你的网页的关键词-->
		<meta http-equiv="refresh" content ="5; url=http://www.baidu.com/ " />
        <!--定时让网页在指定的时间内，跳转到页面-->
	</head>
	<body>哈哈</body>
</html>

java和mysql和html注释区别

java

//
/**/
/***/

mysql

--
/**/

html

<!--注释内容-->

音频标签

<!DOCTYPE HTML>
<html>
	<body>
		<audio src="/i/horse.ogg" controls/>
        <!--单双标签都可以-->
        <!--属性名和属性值相同，属性值可以省略-->
        controls 显示播放按钮控件
        width 设置播放器宽度
        height 设置播放器高度
        loop 重复播放
        muted 静音
	</body>
</html>

视频标签

<!DOCTYPE HTML>
<html>
	<body>
		<video src="/i/movie.ogg" controls/>
	</body>
</html>

加粗标签

<!DOCTYPE HTML>
<html>
	<body>
		<b>加粗</b>
        <strong>加粗</strong>
        <!--代码语义化:b文本加粗,strong文本加粗,语气加重-->
	</body>
</html>

斜体标签

<!DOCTYPE HTML>
<html>
	<body>
		<em>斜体</em>
        <i>斜体</i>
        <!--代码语义化:i文本斜体,em文本斜体,浏览器警示-->
	</body>
</html>

下划线标签

<!DOCTYPE HTML>
<html>
	<body>
		</hr>
        <!--下划线-->
	</body>
</html>

上标签和下标签

<!DOCTYPE HTML>
<html>
	<body>
		x<sup>2</sup><!--上标签-->
		x<sub>0</sub><!--下标签-->
	</body>
</html>

居中标签

<!DOCTYPE HTML>
<html>
	<body>
		<center>您好</center>
	</body>
</html>

换行标签

<!DOCTYPE HTML>
<html>
	<body>
		</br>
        <!--换行-->
	</body>
</html>

标题标签

<!DOCTYPE HTML>
<html>
	<body>
		<h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
        <h4>This is heading 4</h4>
        <h5>This is heading 5</h5>
        <h6>This is heading 6</h6>
	</body>
</html>

块状元素

独占一行，可以改变宽高

内联元素

不独占一行，不能改变宽高

常用的字符实体

HTML 原代码	显示结果	描述
&lt；	<	小于号或显示标记
&gt；	>	大于号或显示标记
&amp；	&	可用于显示其它特殊字符
&quot；	“	引号
&reg；	®	已注册
&copy；	©	版权
&trade；	™	商标
&ensp；		半个空白位
&emsp；		一个空白位
&nbsp；		不断行的空白

超链接

<!DOCTYPE HTML>
<html>
	<body>
        <a href="www.baidu.com">测试</a>
        <!--href：要跳转的页面-->
        <a href="test02.html">测试</a>
        <!--同路径-->
        <!--href：要跳转的页面-->
        <!--上一级目录../-->
        <a  href="test02.html" target="_self">测试</a>
        <!--target打开链接的位置,默认为自身_self,新窗口_blank-->
	</body>
</html>

锚链接

必须大于一屏

<!DOCTYPE HTML>
<html>
	<body>
        <a href="#test1">测试1</a>
        ......
        <a name="test1">测试1</a>
        ......
	</body>
</html>

空链

<!DOCTYPE HTML>
<html>
	<body>
        <a href="#">空链</a>
	</body>
</html>

图片标签

<!DOCTYPE HTML>
<html>
	<body>
        <img src="/i/tu.jpg" alt="" title="" width="100px" height="100px"/>
        <!--alt属性,图片不能展示时的提示文字-->
        <!--title属性,鼠标放到图片上的提示文字-->
        <!--width属性,宽度-->
        <!--height属性,高度-->
        <!--宽高属性调整会导致图片变形-->
	</body>
</html>

列表标签

<!DOCTYPE HTML>
<html>
	<body>
        <ul type="disc">
            <li>语句1</li>
            <li>语句2</li>
        </ul>
        <!--无序列表-->
        <!--type属性默认为disc,可更改square,circle无序列表项目符号-->
        <ol>
            <li>语句1</li>
            <li>语句2</li>
        </ol>
        <!--有序列表-->
        <!--type属性默认为数字,可更改A,a,i有序列表项目符号-->
        <dl>
            <dt>属性</dt>
            <dd>信息1</dd>
            <dd>信息2</dd>
        </dl>
        <!--<dl>标签用于结合 <dt>(定义列表中的项目)和<dd>(描述列表中的项目)-->
        <table border="1" cellpadding="10" cellspacing="0" bgcolor="red">
            <tr>
            	<td>1.1</td>
            	<td>1.2</td>
            	<td>1.3</td>
            </tr>
            <tr>
            	<td>2.1</td>
            	<td>2.2</td>
            	<td>2.3</td>
            </tr>
        </table>
        <!--两行三列的表格-->
        <!--属性border="1"边框宽度为10-->
        <!--属性cellpadding="10"单元格和内容之间的空格为10-->
        <!--cellspacing="0"单元格和单元格之间的空格为10-->
        <!--bgcolor="red"背景颜色为红色-->
        <!--<td>属性 colspan属性规定单元格可横跨的列数>
        <!--<td>属性 rowspan属性规定单元格可横跨的行数>
	</body>
</html>

表单

表单标签

<form>是在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。

属性解析:

属性名	属性说明
action	数据提交的路径，指向数据提交的服务器地址
method	数据提交的方式，常用取值：get、post
enctype	规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式:1. application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2. multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3. text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。

输入域标签

<input>标签用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。

input属性：

属性名	属性说明
id	为当前组件提供一个唯一的标识
type	定义表单输入项input的组件类型详见下一个表格type属性值说明
name	为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据
value	为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
checked	设置单选框/复选框的默认选中状态（全选、反选）
readonly	设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交
disabled	设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交
size	组件的长度
maxlength	设置允许输入的最大的长度
placeholder	输入框的提示信息

input-type属性值说明:

属性值	说明
text	文本框(默认)，单行的输入字段，用户可在其中输入纯文本。
password	密码框。内容为非明文
radio	单选框。必须将其设置为同一组(name的名字必须相同)
checkbox	复选框。必须将其设置为同一组(name的名字必须相同)
file	附件框。用于文件上传。multiple="multiple" 上传多个文件
hidden	隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。
submit	提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性将按钮起一个名字
reset	重置按钮。用于将所有的表单输入项恢复到默认状态
image	图形提交按钮
button	普通按钮。需要和JavaScript事件一起用

<!DOCTYPE HTML>
<html>
	<body>
       <form action="" method="get" >
           <p>First name:<input type="text" name="fname"/></p>
           <p>Last name:<input type="password" name="lname"/></p>
           <input type="submit" value="Submit"/>
        </form>
	</body>
</html>
<!--action触发事件-->
<!--method提交方法-->
<!--value按钮上为按钮文字,输入框为默认文字-->
<!--
button:按钮
checkbox:复选框
file:选择文件
hidden:隐藏
image:图片提交按钮
password:密码框
radio:单选（name在一个组）
reset:重置按钮
submit:提交按钮(通过action提交数据)
text:文本框
-->

下拉列表标签

提供一个下拉列表框，让用户进行选择。 <select>

属性解析:

属性值	说明
name	下拉列表框的名字。
	属性selected选中项、value为当前下拉项的值
multiple	multiple 属性规定输入字段可选择多个值

<!DOCTYPE HTML>
<html>
	<body>
       <form action="" method="get">
           <select name="" id="">
               <option value="Volvo">Volvo</option>
               <option value="Saab">Saab</option>
               <option value="Opel">Opel</option>
               <option value="Audi">Audi</option>
               <!--value为表单提交文字,标签中为页面文字-->
           </select>
        </form>
	</body>
</html>

文本输入控件

HTML提供了多行输入的文本控件：<textarea>

属性解析:

属性值	说明
cols	设置文本域的列数
rows	设置文本域的行数

<!DOCTYPE HTML>
<html>
	<body>
      <textarea rows="3" cols="20">
          	文本文字输入位置
          <!--rows 和 cols 属性，用于声明 <textarea> 的精确尺寸-->
          <!--readonly只读属性-->
          <!--style="resize:none;"不可拉伸-->
        </textarea>
	</body>
</html>

按钮标签

<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

代码示例：

<body>
    <!-- button按钮 -->
    <button>按钮</button>
</body>

表格

HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。

常用标签:

标签名作用

table 父标签，相当于表格的容器

用来定义行，写在标签内标签内

td	用来定义列（单元格），写在
th	表格的列标题: 加粗，居中
caption	表格的标题

属性解析：

属性名属性说明

border 表格边框的宽度(粗细)

width 表格的宽度

height 表格的高度

align

可以用在标签中，表示表格相对于整个浏览器窗口的居中对齐；也可用在或

标签中，设置单元格内容的对齐方式取值：left 居左、right 居右、center 居中
bgcolor	表格的背景颜色
rowspan	合并行
colspan	合并列
cellspacing	单元格之间的空白
cellpadding	表格边缘与内容之间的空白
thead	标签定义表格的表头
tbody	标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容
tfoot	标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

案例代码1：定义3*2表格

<body>
    <!-- 定义3*2表格 -->
    <table border="1px" width="500px" cellpadding="0px" cellspacing="0px">
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
    </table>
</body>

用来定义<table>表格的表头信息，是<tr>的子标签，写在<th>标签中的内容会自动加粗。

代码示例：

<body>
    <table border="1px" width="500px" cellpadding="0px" cellspacing="0px">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
    </table>
</body>

效果演示：

<body>
    <table border="1px" width="500px" height="200px" cellspacing="0px" cellpadding="0px" align="center">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>个人简介</th>
        </tr>
        <tr align="center">
            <td>1001</td>
            <td>柳岩</td>
            <td>女</td>
            <td>我大, 我骄傲</td>
        </tr>
        <tr align="center">
            <td>1002</td>
            <td>刘涛</td>
            <td>女</td>
            <td rowspan="2">我是一名演员</td>
        </tr>
        <tr align="center">
            <td>1003</td>
            <td>宝强</td>
            <td>男</td>

        </tr>
        <tr align="center">
            <td>1004</td>
            <td colspan="2">张艺兴</td>
            <td>小绵羊</td>
        </tr>
    </table>
</body>

meta标签

<meta charset="utf-8"/><!--设置页面编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--设置页面内容类型和编码方式-->
<meta name="keywords" content="html,second"/><!--搜索关键字-->
<meta name="description" content="这是我们开发的第二个前端页面"/><!--网页描述-->
<meta http-equiv="refresh" content="时间;url=地址"/><!--几秒跳转-->

posted @ 2023-05-01 15:40 YxinHaaa 阅读(4) 评论(0) 编辑收藏举报

刷新页面返回顶部

YXH自习室

HTML

HTML

java和mysql和html注释区别

java

mysql

html

音频标签

视频标签

加粗标签

斜体标签

下划线标签

上标签和下标签

居中标签

换行标签

标题标签

块状元素

内联元素

常用的字符实体

超链接

锚链接

空链

图片标签

列表标签

表单

表单标签

输入域标签

下拉列表标签

文本输入控件

按钮标签

表格

meta标签

公告