HTML基础学习笔记

学习HTML的一些基本标签

HTML框架内容

<!DOCTYPE>是一个声明,表示该文档是由HTML5进行编写的

声明必须是HTML文档的第一行,位于标签之前

< html >< /html >标签限定了文档的开始点和结束点,在他们之间是文档的头部和主体

< head >标签用于定义文档的头部,他是所有头部元素的容器

< body >元素包含文档的所有内容,定义了文档的主体

编码:

对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

注释

<!-- 这是一条html注释 -->

网页标题

< title >标签可以设置网页标题

加载图片

< img >标签用于在网页上显示图像

< img >标签有两个必须的属性

src:指定显示图像的URL

alt:指定图像的代替文本

没有结束标志

超链接

< a >标签用于定义超链接

< a >标签最重要的属性时href属性,他指定了链接目标的URL

还可以使用target属性(指定在何处打开超链接)的_blank值,可以在新窗口打开超链接

文档样式

< style > 标签用于为 HTML 文档定义样式信息。

在头部定义,一般为< style type='text/css' >,在开始和结束中间写上定义的内容

定义颜色:

p {color:grey}

定义文本居中:

text-align:center

定义文本左边距:

margin-left:60%

定义段缩进:

text-indent:32px

定义字体大小:

font-size:16px

定义行高:

line-height:32px

定义背景:

body {background-image:url('bg.jpg')}

定义格式:
可以放在head中

可以在定义段落等的同时定义style

< p style='font-size:20px'></p>

< span >

span 没有特定的样式。只有对它设置样式的时候,才会产生视觉上的表现。

当你想要对局部文本设置样式的时候,span元素就很有用。

换行符

用于插入一个换行符

表单

< form > 标签用于为用户输入创建 HTML 表单。用于向服务器传输数据。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

< input >

< input > 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

创建一个输入框:

< input type='text' >

输入最大的长度:
maxlength='10' 

在输入框设置好提示:
placeholder='密码不超过十位'

创建一个名为‘确认’的按钮:

< input type='submit' value='确认'>

创建单选按钮:

< input type="radio" > name

创建password

< input type="password" >

重置输入内容

<input type='reset'>

按钮提示

鼠标移到按钮上会有提示

< p title='i am tips' >< input type='submit', value='tips'></p>

< link > 标签用于指定外部资源。

link 元素最常见的用途是链接样式表:

< link rel="stylesheet" type="text/css" href="1.css" >

将style中的定义放到‘1.css’中

链接网站图标:

< link rel='icon' type='image/x-icon' href='1.ico' >

onsubmit

onsubmit 属性在提交表单时触发。

onsubmit 属性只在

中使用。

语法

<form onsubmit="script">

参数描述

script : onsubmit 发生时运行的脚本。

空格

&nbsp;&nbsp;

< script >

< script > 标签用于在 HTML 文档中加入脚本(例如 JavaScript)。

script 元素既可以直接定义内嵌脚本语句,也可以通过 src 属性引用外部脚本文件。

不能在一个script标签里即定义内嵌语句又引入外部脚本

script 元素可以出现在 HTML 文档中的各个部分,一个文档可以包含多个 script 元素。

斜体

<i>  </i>

按钮

在一个表单下创建多个按钮,且跳转页面不同

<form action="./login.php" method="post" style="text-align: center;">
        <input type="text" name="username" placeholder='username'><br>
        <input type="password" name="password" placeholder='password'><br>
        <input type='submit' value="login">
        <button type='submit' formaction="./register.html">register</button>
    </form>

< textarea >

定义多行文本输入控件;

可以通过 cols 和 rows 属性来规定 textarea 的尺寸

设置属性readonly="readonly"可以显示文本而不能修改

可以通过 form 属性设置表单提交的目标路径

<form action='' id="messageform">
        <p><textarea rows="20" cols="60" name="username" from="messageform"></textarea></p>
        <p><input type="submit" name="submit">
        <input type="reset" name="reset">
        </p>
    </form>

< fieldset >

将表单内的相关元素分组;这个标签会产生特殊的边界;<legend>为此标签定义标题

< table >

表格标记,<table>用于定义一个表格,<tr>用于定义行,<td>用于定义列

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成

TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。

<th>用于定义表格的表头单元格

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>90</td>
<td>100</td>
</tr>
</table>

单选控件与复选控件

单选控件:<input type="radio" name="gender" value='boy'>

复选控件:<input type="checkbox" name="interest" value="film">

无论是单选控件还是复选控件,他们必须指定相同的name,这样方便后端接收数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<fieldset>
<legend>Hello</legend>
<form action="#" method="post" accept-charset="utf-8">
<table align="center">
<tr>
<td>
<input type="radio" name="gender" value='boy'> 男孩
<input type="radio" name="gender" value='girl'> 女孩
</td>
</tr>
<tr>

<td>
<input type="checkbox" name="interest" value="film"> 打游戏
<input type="checkbox" name="interest" value="ctf"> CTF
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</fieldset>

< ul >

<ul>标记用于定义无序列表,< li >用于描述具体的列表项

1
2
3
4
5
<ul>
<li>第一点</li>
<li>第二点</li>
<li>第三点</li>
</ul>