9

【html】笔记

 3 years ago
source link: https://www.guofei.site/2019/08/17/html.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

【html】笔记

2019年08月17日

Author: Guofei

文章归类: 语言，文章编号: 15001

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

Edit

head

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

<head>

	<meta charset="UTF-8">

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

	<!-- 指定css文件，也可以直接写css -->
	<link rel="stylesheet" href="/css/bootstrap.css">

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

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

</head>

<body>
</body>

</html>

body

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

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

<div><div>空格 符号</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. style如何设置

select标签

<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>

</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>

山东省 四川省

table表格

<table border="1">

    <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/">
您的支持将鼓励我继续创作！

report

Recommend

  • 39
    • www.cnblogs.com 4 years ago
    • Cache

    html入门详细笔记

    Web的基本概念 什么是Web? 中文翻译“网页”，它是一些列技术的总称，（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。 Web标准 结构标准（HTML） 网页的结...

  • 4
    • wiki-power.com 3 years ago
    • Cache

    HTML 学习笔记

    HTML 学习笔记基本框架#可打开 .html 文件，直接输入 html:5 调出语句

  • 7
    • blog.k4nz.com 3 years ago
    • Cache

    「HTML」- 学习笔记

    「HTML」- 学习笔记 「HTML」- 学习笔记 ...

  • 4
    • blog.diqigan.cn 3 years ago
    • Cache

    html + css 学习笔记

    css 中使用 /*注释内容*/ 来进行注释。 CSS 插入形式1. 内联式 把 css 代码直接写在现有的 HTML 标签中：<p style="color:red; font-size:12px"> 段落内容 </p>2...

  • 4
    • www.cnblogs.com 3 years ago
    • Cache

    html笔记 - zd13720

    html笔记 系统结构B/S架构（以后主要走的方向）Browser/Server （浏览器/服务器的交互形式）Browser支持哪些语言 HTML CSS J...

  • 12
    • sakurahack-y.github.io 3 years ago
    • Cache

    html学习笔记

    [TOC] 简单的HTML页面架构<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> c...

  • 24
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-4

    一、css三大特性 1、层叠性​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 ​ 层叠性原则: 样式冲...

  • 5
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-5

    1. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留...

  • 5
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-7

    1. 精灵图（重点） 1.1 为什么需要精灵图1571482435259

  • 6
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-6

    1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？ 场景1：...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK