【html】笔记



2019年08月17日    Author:Guofei

文章归类: 合集    文章编号: 15001

版权声明:本文作者是郭飞。转载随意,但需要标明原文链接,并通知本人
原文链接:https://www.guofei.site/html.html


<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>页面标题</title>
	<link rel="shortcut icon" href="/图标.png" />


	<!-- 指定每5秒刷新一次: -->
	<meta http-equiv="refresh" content="5">
	<!-- 指定1秒之后跳转页面至另一个网页: -->
	<meta http-equiv="refresh" Content="1;Url=https://www.guofei.site/" />

	<meta name="keywords" content="关键词,用于,SEO">
	<meta name="description" content="描述,整个页面的描述">


	<!-- 引入css -->
	<link rel="stylesheet" href="/css/bootstrap.css">
	<style>

	</style>


	<!-- 引入js -->
	<script src="test.js"></script>
	<script>
	</script>

</head>

<body>
</body>

</html>

body

<div>块级标签,占用整行</div>
<div>所以两个块级标签会占两行</div>
<span>内联标签占用实际大小</span>
<span>2个内联标签不换行</span>
块级标签,占用整行
所以两个块级标签会占两行

内联标签占用实际大小 2个内联标签不换行

特殊符号

<div>&lt;div&gt;空格&nbsp;符号</div>
<div>空格 符号

常用标签


<p>段落标签<br>换行标签</p>

<a href="https://www.guofei.site/" target="_blank">a标签</a>

<h1>H1标题</h1>
<h6>H6标题</h6>

目录跳转:

目录:
<div>
  <a href='#id1'>第一章</a>
  <a href='#id2'>第二章</a>
  <a href='#id3'>第三章</a>

</div>

内容:
<div id='id1'>id1对应的第一章内容</div>
<div id='id2' style="height:1000px;background-color:red;">id2</div>
<div id='id3'>id3</div>

上面代码展示了:

  1. 目录跳转
  2. style如何设置

select标签

共有4种

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">默认成都</option> <!--这里默认是成都因为selected="selected" 这里设置了默认的!-->
</select>



<!-- 显示2个 -->
<select size="2">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">成都</option>
</select>



<!-- 可多选 -->
<select size="2" multiple="multiple">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">成都</option>
</select>


<!-- 分组 -->
<select>
    <optgroup label="山东省">
        <option>济南</option>
        <option>青岛</option>
    </optgroup>
    <optgroup label="四川省">
        <option>成都</option>
        <option>绵阳</option>
    </optgroup>
</select>

input

输入框:<input type='text' />
<br>
密码:<input type='password' />
<textarea>多行输入框</textarea>

输入框:
密码:

多选框1<input type='checkbox' />
多选框2<input type='checkbox' />
多选框3<input type='checkbox' />
多选框4<input type='checkbox' />

多选框1 多选框2 多选框3 多选框4

单选框:

<input type='radio' name='gender' /><input type='radio' name='gender' /><input type='radio' name='gender' />
初中生<input type='radio' name='std' />
高中生<input type='radio' name='std' />

初中生 高中生

  • 通过name控制单选分组

button按钮

<head>
<script language="javascript">
	function check(){
alert("111");return;
	}
</script>

</head>

<body>
  <center>
	  <form name="form1" method="post" action="">

	用户登录<br>
		用户:<input name="user" type="text" id="user">
	<br>
		密码:<input name="pwd" type="password" id="pwd">
	<br>
		<input name="Button" type="button"  value="登录" onClick="check()">
		<input name="Submit2" type="reset"  value="重置">

	  </form>

</center>

</body>
用户登录
用户:
密码:

实现功能:

  1. 点击确认后,调用 check()
  2. 重置按钮的功能
  3. onclick=”window.close()” 点击按钮关掉本窗口

上传文件

<input type='file' />

form表单

对比上面的 button 按钮,这里的 submit

<form action='http://127.0.0.1:9999/getdata/' method='POST'>
	姓名:<input name='username' type='text' /><br>
	密码:<input name='pwd' type='password'><br>
	<input type='submit' value='提交'>
</form>

?服务端代码待补充

from django.shortcuts import render
from django.http.response import HttpResponse


def GetData(request):
    print(request.POST)
    return HttpResponse('ok')

for标签

效果是点击文字时,自动激活某个input

<label for="marry2">
    姓名:<input type="text" id="name2"/>
    婚否:<input type="checkbox" id="marry2"/>
</label>

序号

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>山东省</dt>
        <dd>济南市</dd>
        <dd>青岛市</dd>
    <dt>四川省</dt>
        <dd>成都市</dd>
        <dd>绵阳市</dd>
</dl>
  • 无序列表
  • 无序列表
  • 无序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表
山东省
济南市
青岛市
四川省
成都市
绵阳市

table表格

<table border="1">
    <caption>表格的标题</caption>
    <tr>
			<!-- th是表头 -->
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>

    <tr>
        <td colspan="3">1</td>
        <!--这里colspan,就告诉html解析的时候横向占3个格-->
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <!--这里colspan,就告诉html解析的竖向时候占2个格-->
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
表格的标题
1 2 3
1
1 2 3
1 2

fieldset外框

<fieldset>
    <legend>小标题</legend>
    <p>用户名:</p>
    <p>密码:</p>
</fieldset>
小标题

用户名:

密码:

实用代码

很多元素放一起的案例

<html>
<title>标题</title>

<body><b>加粗</b>
<center>

<p>居中</p>
<h1>一级标题</h1>
</section>
</center>

<ol>
<li>有序列表
换行
<li>有序列表
</ol>

<table border="1">
	<caption>表格的标题</caption>
	<tr>
		<th>姓名</th>
		<th>学号</th>
		<th>语文</th>
		<th>化学</th>
		<th>英语</th>
	</tr>
	<tr>
		<td>姓名</td>
		<td>学号</td>
		<td>语文</td>
		<td>化学</td>
		<td>英语</td>
	</tr>
</table>



<form>
<input type="text" checked="checked" size=60>输入框
<input type="file" alt="xianshgu">选择文件

<br>
<input name="sex" type="radio"  checked>复选框:男
<input name="sex" type="radio" >复选框:女
</form>

<select name="列表框" size=3>
<option>手机1</option>
<option>手机2</option>
<option>手机3</option>
<option>手机4</option>
</select>

<select name="列表框" multiple="multiple">
<option>手机1</option>
<option>手机2</option>
<option>手机3</option>
<option>手机4</option>
</select>


<textarea wrap="off"></textarea>



<acticle>
<header>111</header>
<footer><>

</acticle>

<br>
<form>
<input type="email">这里就必须输入 email 格式了
<input type="submit">222
</form>



<style>
#boarder {
	margin:3px;
	width:180px;
	padding-left:14px;
	border-width:5px;
  	border-color:black;
	border-style:solid;
	height:104px;
}
</style>


<p id="boarder"> 文字一<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
</p>

</body>
</html>

下拉框

<details>
  <summary>下拉框的按钮</summary>
		下拉框的内容
  <br>
</details>
下拉框的按钮 下拉框的内容

一个页面如何引入其它页面

https://blog.csdn.net/arvin0/article/details/56839242

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

iframe

<div id="page1">
		 <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

整页自动跳转

<meta http-equiv="refresh" content="0.1;url=https://scikit-opt.github.io/scikit-opt/#/en/">

您的支持将鼓励我继续创作!