1--HTML基础

1.页面结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

编码：charset=“gbk” ；gbk2312，utf-8

注释：

2.常见标签

2.1 meta标签

关键字

<meta name="keywords" content="HTML基础" />

作者

<meta name="author" content="lxl" />

描述

<meta name="distribution" content="这是一个基础网站" />

注释

<p> 段落内容 </p> 段落

2.2 标题标签

由大到小

<br> 换行标签

<p>进行<br>换行</p>

<hr> 换行线标签

<p>进行<hr>换行</p>

2.3 文本属性

<strong> 加粗

<b>加粗

<p>进行<strong>加粗</strong></p>

<p>进行<b>加粗</b></p>

<i>斜体

<u>下划线

<sup>下标
<sub>上标

<del>删除线

<font>规定字体属性

　　size 字体大小

　　color 字体颜色

<font size="15px" color="blue">字体属性</font>

<pre>代码样式原样输出

<p>

　　<pre>www< /pre>

</p>

2.4 form标签

form标签用于为用户输入建立HTML表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等

action属性定义在提交表单时执行的动作，通常会被提交到web服务器上的网页

可以指定某个服务器脚本来处理被提交表单：

<form action="action_page.php"></form>

如果省略action属性，则action会被设置为当前页面：

<form action=""></form>

method提交的方法有get，post

enctype属性的值：

　　application/x-www-form-urlencoded（默认选项）

　　multipart/form-data

　　text/plain

<form method="post" enctype="application/x-www-form-urlencoded"></form>

<input>元素是最重要的表单元素

注意：表单本身是不可见的

对于type属性：

　　text：定义常规文本输入的单行输入字段

<input type="text" name=""/>

　　password：密码输入框

　　file：文件上传（此时enctype的值应为第二个选项）

<form method="post" enctype="multipart/form-data">
            <input type="file" value="file"/>    
            <input type="submit" />
</form>

　　hidden：隐藏域

　　button：按钮

　　reset：重置按钮

　　submit：定义提交按钮（提交表单）

　　radio：定义单选按钮输入（选择其中之一）

　　checkbox：定义多选按钮（选择其中多个）

<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female

name="sex"的作用是性别只能单选

name：同样表示文本输入框名称

（如果要正确的被提交，每个输入字段必须设置一个name属性）

size：输入框的大小

maxlength：输入框中允许输入字符的最大数

value：输入框中的默认值

readonly：表示该输入框只能显示，不能修改

<input type="text" name="username" size=25 maxlength="5" value="lxl" readonly="" />

2.5 a标签

a标签用于控制界面与页面之间的跳转

target的默认值为_self

_self：用于在当前选项卡中跳转，不新建页面

<a href="http://baidu.com" target="_self">百度</a>

_blank：用于在新选项卡中跳转，要新建页面

<a href="http://baidu.com" target="_blank">百度</a>

_parent：在父框架集中打开被链接文档

_top：在整个窗口中打开被链接文档

2.6 锚文本

<p name="top">顶部内容</p> 锚点
<a href="#top">跳转顶部</a> 跳转锚点

2.7 img标签

img标签用于向网页中嵌入一幅图像

<img src="img/txt.jpg" alt="替代文本"/>

src：规定显示图像的url

alt：规定图像的替代文本

width：规定图片的高度

height：规定图片的宽度

2.8 table标签

table标签用于定义HTML表格

<table border="5" cellpadding="10" cellspacing="10">
            <caption>学生表</caption>
            <th>分类</th>
            <tr><td>学号</td><td>姓名</td><td>年龄</td></tr>
            <tr><td>01</td><td>lxl</td><td>20</td></tr>
            <tr><td>02</td><td>zhj</td><td>35</td></tr>
            <tr><td>03</td><td>ljk</td><td>40</td></tr>
</table>

border：定义表格边框

cellpadding：定义单元边沿与内容的空白

cellspacing：定义单元格的空白

colspan：行合并

rowspan：列合并

<caption>定义表格标题

<th>定义表格表头

<tr>定义表格的行

<td>定义表格单元

2.9 列表标签

<ul>标签用于定义无序列表

<ul type="circle">
            <li>文本内容</li>
            <li>文本内容</li>
</ul>

项目符号：circle（默认），square，disc

注意：type=“none”时无项目符号

<ol>标签用于定义有序列表

<ol type="1">
            <li>文本内容</li>
            <li>文本内容</li>
</ol>

标记类型：1（默认），A，a，I，i

2.10 框架使用

frameset 标签可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档

在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行

简单的三框架页面：

<frameset rows="30%,*">
        <frame src="top.html" />
        <frameset cols="20%,*">
            <frame src="left.html" />
            <frame src="main.html" />
        </frameset>
</frameset>

frameset标签在一个页面中设置一个或多个框架，不能嵌套在body标签里

frame标签是在html页面内嵌入框架，框架内可以连接另一个页面，一般在frameset标签中使用

cols：定义框架集中列的数目和尺寸

rows：定义框架集中行的数目和尺寸

scrolling：滚动条

<frame src="" scrolling="auto" />

auto：在需要的情况下出现滚动条（默认值）

yes：始终显示滚动条（即使不需要）

no：从不显示滚动条（即使需要）

posted @ 2023-07-11 21:42 lxl3344 阅读(69) 评论(0) 编辑收藏举报

刷新页面返回顶部

lxl3344