HTML基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习笔记</title>
</head>
<body>
<!--
标题标签：范围1~6，数字越小，标题越大；
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h4>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
水平分割线
Creates a horizontal line in the HTML document
-->
<hr>
<!--
段落
Defines a paragraph of text.
-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<!--
字体：设置字体
color属性设置颜色；
size属性范围：1~7；
face：设置字体
属于行内标签，不会自动换行。
Specifies the font (or font family), color, and size of the enclosed text.
<标签 属性名="属性值">
-->
我是<font color="red" size="1">字体</font>
我是<font color="red" size="2">字体</font>
我是<font color="red" size="3">字体</font>
我是<font color="red" size="4">字体</font>
我是<font color="red" size="5">字体</font>
我是<font color="red" size="6">字体</font>
我是<font color="red" size="7" face="楷体">字体</font><br/>
<!--
加粗：
Displays the text of the element as boldface text.
-->
<b>加粗</b>
<!--
加粗2：包含语义，假如在自动阅读时，会加重语气。
Specifies that the enclosed text should be rendered in the browser as "strong" (usually bold) text.
-->
<strong>加粗2</strong><br/>
<!--
斜体：
Specifies that the enclosed text should be displayed in italics.
-->
<i>斜体</i>
<!--
斜体：包含语义。
Specifies that the enclosed text should be emphasized.
-->
<em>斜体2</em><br />
<!--
图片：Defines an image object that is embedded in the document.
行内元素，并且是单标签。
src：路径 Specifies the URL of an image
./ 代表当前目录
../ 代表上级目录
我们要从当前目录如何到达目标目录，就怎样写。
alt：替代文本 Specifies alternative text to display if the element cannot be displayed as expected.
-->
<img src="img/bgpt.PNG" width="300px" alt="图片加载失败" /><br />
<img src="img/bgpt.PNGxxx" width="300px" alt="图片加载失败" /><br />
<!--
无序列表：Defines an unordered list, such as a bulleted list.
type：指定样式
-->
<ul type="circle">
<!--Defines a list item in an ordered list (ol) or in an unordered list (ul). -->
<li>西瓜</li>
<li>香蕉</li>
</ul>
<ul type="square">
<!--Defines a list item in an ordered list (ol) or in an unordered list (ul). -->
<li>西瓜</li>
<li>香蕉</li>
</ul>
<!--
有序列表：Defines an ordered (e.g. numbered) list.
type:指定样式
-->
<ol type="1">
<li>西瓜</li>
<li>香蕉</li>
</ol>
<ol type="I">
<li>西瓜</li>
<li>香蕉</li>
</ol>
<!--
超链接：Specifies either a hyperlink or a target for a hyperlink.
href: Path or URL for the linked document or object.
target:打开方式 Target window to use for opening the linked document.
_blank 新窗口
_self 本页面
-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!--
表格：Defines an HTML table in a document.
border：边框
align:对准 Defines the alignment of the element.
bgcolor：Specifies the background color for the document or element. Specify either a color name or RGB color.
表格的合并：跨行和跨列会挤掉相应位置的列，所以们要删除相应位置的列元素。
colspan：跨列
rowspan：跨行
-->
<table border="1px" align="center" bgcolor="blanchedalmond" width="500px">
<tr align="center">
<td>鼠标</td>
<td bgcolor="aqua">鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
</tr>
<tr>
<td>鼠标</td>
<td>鼠标</td>
<td align="center" bgcolor="burlywood">鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
</tr>
<tr>
<td colspan="2">鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
</tr>
<tr>
<td>鼠标</td>
<td rowspan="2">
<table border="1px" width="100%">
<tr align="center">
<td>1</td>
<td>2</td>
</tr>
<tr align="center">
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>鼠标</td>
<td rowspan="2">鼠标</td>
<td>鼠标</td>
</tr>
<tr>
<td>鼠标</td>
<td>鼠标</td>
<td>鼠标</td>
</tr>
</table>
<!--
表单：Defines a form within a document.
action：URL for submitting the form.
method:Specifies the method to use to transfer form data to the server.
-->
<form action="案例/网站信息页面.html" method="post">
<!--
输入：Defines an input element, such as a text field control or button, within a form.
type:Specifies the type of input control.
text:Single line text field.
password:Password input field. Hides keystrokes with *'s.
file:Allows user to browse to and upload a file.
radio:Radio control button. Allows user to select a single option. name属性可以将它们分为一组。
checkbox:Checkbox control. Allows user to select multiple choices.
hidden:隐藏域 Form control that is not visible to the user. Used to store state information.
date:Text field for dates.
tel:Text field for telephone numbers.
number:Text field for numbers.
name:Unique name identifier for the element. (表单提交时，会当作参数的名称)
id:Unique identifier for the element. （唯一标识）
placeholder:Specifies a hint to help users fill out the input field.
-->
用户名：<input type="text" placeholder="邮箱" />
密码：<input type="password" /><br />
选择文件：<input type="file" /><br />
性别：<input type="radio" name="sex" />男<input type="radio" name="sex" />女<br />
爱好：<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />乒乓球<br />
生日：<input type="date" /><br />
手机号：<input type="tel" /><br />
区号：<input type="number" /><br />
<!--
文本域：Defines a multi-line text input area.
cols：Number of characters wide that the element should be.
Number of rows in the element.
-->
备注：<textarea cols="40" rows="4"></textarea><br />
<!--
下列列表：Defines a selection list control in a form.
-->
籍贯：
<select>
<option>---请选择---</option>
<option>美国</option>
<option>日本</option>
<option>德国</option>
</select><br />
<input type="submit" value="提交" />
<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="hidden" value="17987" />
</form>
</body>
</html>
frameset框架
点击aaaaa
结合下面几个页面理解
framedemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>framdemo</title>
</head>
<!--
Defines a set of window-like frames within a parent window.
如果需要使用framset标签，需要将body标签删除。
cols：按列划分页面
rows：按行划分页面
-->
<frameset rows="15%,*">
<frame src="framdemo01.html" />
<frameset cols="15%,*">
<frame src="framdemo02.html" />
<frame src="framdemo03.html" name="showfram" />
</frameset>
</frameset>
</html>
framedemo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="aliceblue">
111
</body>
</html>
framdemo02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="antiquewhite">
<a href="framdemo04.html" target="showfram">aaaaa</a><br />
<a href="framdemo04.html">bbbbb</a><br />
<a href="framdemo04.html">ccccc</a>
</body>
</html>
framdemo03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="aqua">
</body>
</html>
framdemo04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="aquamarine">
dshsdhsjhshdjshdkshdh
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
