html入门

1while(true){learn}

已于 2022-04-19 11:59:04 修改

阅读量221

点赞数

分类专栏： JavaWeb 文章标签： java

于 2022-04-13 11:00:09 首次发布

本文链接：https://blog.csdn.net/m0_55997161/article/details/124143212

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1)
html语言是解释型语言，不是编译型,即便代码中有错误也能运行下去
浏览器是容错的
2)
html页面中由一对标签组成：<html></html>

<html>称之为开始标签
</htm1>称之为结束标签
<head></head>表示网页头部
<body></body>表示网页主体
3)
title表示网页的标题
可以在meta标签中设置编码方式
4)
<br/>表示换行。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
5)
img标签图片标签
   src属性表示图片文件的路径
   width和height表示图片的大小
   alt表示图片加载失败后的文字提示

6)
h1-h6 标题标签
7）
列表标签
   o1有序列表
   start表示从*开始，type显示的类型：A a I i 1(default)
   u1无序列表
   type disc(default),circle square
8)
u下划线b粗体i斜体
9)
上标sup下标sub
10)
实体符号
11)
span不换行的块标记
12)
a表示超链接,href链接的地址
   target:
       self在本窗口打开
       blank在一个新窗口打开
13)
   表格table
   tr 列
   td 行
   th 表头列
   tab1e中有如下属性（虽然已经淘汰，但是最好了解一下
   border:表格边框的粗细
   width:表格的宽度
   cellspacing:单元格间距
   cellpadding::单元格填充
   tr中有一个属性：align->center,left,right
14)
表单form
input type="text"表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
input type="password'"表示密码框
input typea="radio"表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果；可以通过checked)属性设置默认选中的项
input type="checkbox'"表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select表示下拉列表。每一个选项是option,其中value.属性是发送给服务器的值，selected表示默认选中的项
textarea表示多行文本框（或者称之为文本域），它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset'"表示重置按钮
input type="button"表示普通按钿

<html>

	<head>
		<title>No.1</title>
		<meta charset="UTF-8">
	</head>

	<body>

		 你好<br />hello
		<p>这是一个段落</p>
		<p>这是第二个段落</p>
		<img src="imgs/01.png" width="260" height="152" alt="魔方" />
		<h1>标题一共有6个级别</h1>
		Rick and Morty
		<ol type="A" start="1">
			<li>Rick</li>
			<li>Morty</li>
			<li>Jerry</li>
		</ol>
		program
		<ul type="circle">
			<li>Java</li>
			<li>C++</li>
			<li>Python</li>
		</ul>
		<b><i><u>Go</u></i></b><br />
		水分子:H<sub>2</sub>0<br />
		氧气:0<sup>2</sup><br />
		<span>11111</span>
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<table border="1" width="600" cellpadding="4" cellspacing="0">
			<tr align="center">
				<th>姓名</th>
				<th>性别</th>
				<th>级别</th>
			</tr>
			<tr align="center">
				<td>rick</td>
				<td>男</td>
				<td><img src="imgs/01.png" width="44" height="24"></td>
			</tr>
			<tr align="center">
				<td colspan="3">人类</td>
			</tr>
		</table>
		<form action="" method="post">
			用户名:<input type="text" name="nickname" value="" /><br />
			密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" /><br />
			性别:<input type="radio" name="sex" value="male" checked= />男
				<input type="radio" name="sex" value="female" checked= />女<br />
			爱好:<input type="checkbox" name="hobby" value="basketball" checked />篮球
				<input type="checkbox" name="hobby" value="football" />足球<br />
			星座:<select name="star">
				<option value="1" selected >双子座</option>
				<option value="2">白羊座</option>
				<option value="3">射手座</option>
			</select><br />
			备注:<textarea name="remark" rows="2" cols="50"></textarea><br />
			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
			<input type="button" value="普通按钮" />
		</form>

	</body>

</html>

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.

<!DOCTYPE html>
<!--设置语言支持,en代表英语-->
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <iframe src="index.html" width="500" height="500" name="abc"></iframe>
    <a href="edit.html" target="abc"><input type="button" value="替换"></a>
</body>
</html>

表单

<form action="http://localhost:8080" method="post">
  <input type="hidden" name="action" value="login" />
  <h1 align="center">用户注册</h1>
  <table align="center">
    <tr>
      <td> 用户名称：</td>
      <td>
        <input type="text" name="username" value="默认值"/>
      </td>
    </tr>
    <tr>
      <td> 用户密码：</td>
      <td><input type="password" name="password" value="abc"/></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td>
        <input type="radio" name="sex" value="boy"/>男
        <input type="radio" name="sex" checked="checked" value="girl" />女
      </td>
    </tr>
    <tr>
      <td> 兴趣爱好：</td>
      <td>
        <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
        <input name="hobby" type="checkbox" value="js"/>JavaScript
        <input name="hobby" type="checkbox" value="cpp"/>C++
      </td>
    </tr>
    <tr>
      <td>国籍：</td>
      <td>
        <select name="country">
          <option value="none">--请选择国籍--</option>
          <option value="cn" selected="selected">中国</option>
          <option value="usa">美国</option>
          <option value="jp">小日本</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
    </tr>
    <tr>
      <td><input type="reset" /></td>
      <td align="center"><input type="submit"/></td>
    </tr>
  </table>
</form>

当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

form 标签是表单标签 action 属性设置提交的服务器地址 method 属性设置提交的方式 GET(默认值)或 POST 表单提交的时候，数据没有发送给服务器的三种情况：

1、表单项没有 name 属性值

2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器

3、表单项不在提交的 form 标签中

GET 请求的特点是：

1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value

2、不安全

3、它有数据长度的限制

POST 请求的特点是：

1、浏览器地址栏中只有 action 属性值

2、相对于 GET 请求要安全