html基础

最新推荐文章于 2023-12-07 19:12:44 发布

codereview0

最新推荐文章于 2023-12-07 19:12:44 发布

阅读量798

点赞数

分类专栏： javaweb 文章标签： html基础

本文链接：https://blog.csdn.net/qq_27694623/article/details/66476912

版权

javaweb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

HTML

定义

全称为HyperText Markup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。简单来说它是一种使用标签来定义的语言。

基本格式

<html>
    <head><title></title></head>
    <body></body>
</html>

头标签

A.<meta>：name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
例：
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /> 表示打开此页面3秒后自动转到新浪：指定浏览器的标题栏显示的内容。

C.：为页面上的所有链接规定默认地址或默认目标。
href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。
或者只演示_blank
<a href="#">点击</a>link>：定义文档与外部资源的关系。
rel 属性：描述目标文档与当前文档的关系。
type 属性：文档类型。
media：指定目标文档在哪种设备上起作用。
<link rel="stylesheet" type="text/css" media="screen,print" href="a.css" />

html中的网页文字

font标签

–size ：字体的大小（1-7）
–color：字体颜色
–face:文字的字形

实例
<font size="5" color="aqua" face="微软雅黑">这个是font标签实例。</font>

标题标签(h1 h2 h3 h4 h5 h6)

特殊字符（如果要显示 <,>,&等特殊字符.需要用特殊方式表示）

<  ：&lt;
>  : &gt;
&  : &amp;
空格 ：&nbsp;
双引号”：&quot;       
注册符®：&reg;  
版权符©： &copy;

文字列表的使用

定义列表dl

            <dl>
                <dt>标题</dt>
                <dd>内容1</dd>
                <dd>内容1</dd>
                <dt>标题1</dt>
                <dd>内容11</dd>
                <dd>内容12</dd>
            </dl>

显示

标题
内容1

内容1
标题1
内容11

内容12

B:有序列表
列表项：li
type(规定列表标记类型)这样一个属性:A,a,I,i,1.默认是阿拉伯数字 1
start(控制序号开始的值)默认开始值为1

            <ol type="1">
                <li>内容1</li>
                <li>内容2</li>
            </ol>

显示

内容1
内容2

C:无序列表ul(Unordered List)
type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc

            <ul type="circle">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>

显示

内容1
内容2
内容3

标记位置
图片标签（img）
A：网页上使用的图片主要格式是gif和jpg两种。
在网页中使用图片，从视觉效果而言，能使网页更加绚丽，并且直观表达了网页的主题。
图片使用的要求
1.选择与网页分格贴近的图片，最好自己制作以体现网页的设计意图。
2.图片的色调要保持一致，不要过于花哨。
3.要注意图片不能过大，不利于网页上传和浏览者浏览。

B：img标签及其属性
height：控制图片的高度
width：控制图片的宽度
图片的单位是像素，也可以是相对当前窗口的百分比。
border：图片的边框
alt:当图片不存在的时候显示的文字

C:控制图片相对于图片基线的位置
align: top,center,bottom

实例

<img src="图片地址" height="150px" width="200px" alt="HBuilder" border="1" align="right" />

路径的介绍
分类：两类
1. 绝对路径
- e:\test/test.jpg
- http://www.baidu.com/test.jpg
2.相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
a.html文件和图片在一个路径下，可以直接写文件名称
<img src="b1.jpg" alt="这是一个图片"/>
b.图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
html路径 – e:\test\ b.html
图片路径– e:\test\ img\a.jpg
在html中使用图片 4.html和img在一个路径下
img\a.jpg

    c.图片在html文件的上层目录        
            --- e:\test\  b.html
            --- e:\  c.png
                * 怎么表示上层路径  ../
                * 想要表示上层的上层 ../../

超链接的使用

A：a标签中的属性
href：用来设置超链接的目标。
B:特定目标的链接
一般在页面中，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效

<a name=“标记”>标记位置</a>
<a href=“#标记”>返回</a>

C:把图片标签包含在a标签里面
D:超链接的其他应用
属性 href:用于连接资源。如果是http的资源，一定要写上http。表示用http协议进行解析。
target这个属性指定所链接的页面在浏览器窗口中的打开方式，
它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：
　　_blank，在新浏览器窗口中打开链接文件。
　　_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
　　_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
　　_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
电子邮件的链接
mailto:邮箱地址
点击超链接浏览器做的事情：
1,启动相对应的协议引擎。
2,解析协议后面的具体内容。
3,如果跟的是一个主机地址。先查找本机hosts文件列表。是否可以找到该主机对应ip。
如果没有找到，会找本机指定的后者本机默认的DNS服务器。去解析该主机。
4,获取到该ip后，在连接该指定ip的主机，并获取所需的资源。

注意：
1，当没有指定具体协议时，浏览器会启动默认的file协议引擎来解析href的值。
2，当指定的协议浏览器无法解析时，浏览器会在本地注册中查找是否有关联该协议的应用程序。如果有就调用程序进行该协议的解析。

表格

A：创建一个简单的表格
table:表格标签
caption:给表格提供标题
tr:表格的行标签
th:表头标签
td:单元格标签

<table align="center" bgcolor="aquamarine" border="1 solid" width="200px" height="200px" cellspacing="1px" cellpadding="50%">
            <caption>
                九宫格
            </caption>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <th>4</th>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <th>7</th>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>

九宫格
1	2	3
4	5	6
7	8	9

B：表格边框的设置
border:表格的外边框粗细
cellspacing:表格的内边框粗细
cellpadding:设置文字到单元格的距离

C:表格宽高的设置
width:宽
height:高
单位为像素，也可以是百分比。

D：表格相关颜色的设置
bordercolor:边框颜色
bgcolor:背景色

E：表格的内容的位置设置
align:文字的水平位置 left,center,right
valign:文字的垂直位置 top,middle,bottom

F：表格中单元格的合并
colspan:列合并
rowspan:行合并

<table align="center" bgcolor="aquamarine" border="1 solid" width="200px" height="200px" cellspacing="1px" cellpadding="50%">
            <thead>
                <caption>
                    表格标题
                </caption>
            </thead>
            <tbody>
            <tr>
                <th rowspan="2">1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>

                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <th>7</th>
                <td>8</td>
                <td>9</td>
            </tr>
            </tbody>

            <tbody>
            <tr>
                <th colspan="2">1</th>
                <th>2</th>

            </tr>
            <tr>
                <th>4</th>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <th>7</th>
                <td>8</td>
                <td>9</td>
            </tr>
            </tbody>
            <tfoot>

            </tfoot>
        </table>

表格标题
下面是列合并
1	2	3
1	5	6
7	8	9
下面是行合并
1		2
4	5	6
7	8	9

G：表格的嵌套
在表格的单元格中嵌套一个表格。

表格可以用于布局页面。

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以thead、tfont和tbody元素表示。
thead、tfont包含关于表格列的信息。
tbody作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个tbody行，就可以先显示一行。
tbody这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上tbody和/tbody。

表单

A：form标签中常见的属性定义：
action：指定表单组件数据发送的位置。如果没有定义action属性，那么默认提交到当前页面。
method：定义表单提交的方式。只有两种常用 get post.如果没有指定method，默认就是get提交方式。
B：input标签中type的类型如下
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
C：两个特殊的
<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
<textarea>：多行文本框。如：个人信息描述。
实例

<form action="index.html" method="post">
            输入框：<input type="text" /><br />
            密码框：<input type="password" /><br />
            单选框：<input type="radio" name="g" value="1"/>1
                <input type="radio" name="g" value="2" checked="checked" />2
            <br />
            复选框：<input type="checkbox"  name="a" value="1"/>1
                <input type="checkbox"  name="b" value="2"/>2
                <input type="checkbox"  name="c" value="3"/>3
                <br />
            隐藏字段：<input type="hidden"  name="h"/><br />
            提交按钮：<input type="submit" value="提交"/><br />
            重置按钮：<input type="reset" value="重置"/><br />
            没绑定事件按钮：<input type="button" value="按钮"/><br />
            图片按钮：<br/><input type="image" name="submit" src="img/HBuilder.png" /><br />
            文件输入：<input type="file" name="upload" accept="text/html" size="30"/>
            下拉框(单选)： 
            <select name="w" >
                <option value="1">1</option>    
                <option value="2">2</option>    
                <option value="3">3</option>    
            </select>
            <br />
            文字域：<textarea name="aa" cols="10" rows="10">请输入你要填写的内容
            </textarea>
        </form>

D：form表单的两种提交方式的区别
a.
get：会将提交的信息显示在地址栏上。
post:不会将提交的信息显示在地址栏。
b.
get:对于敏感信息不安全。因为显示在地址栏。
post：对于敏感信息安全。因为不显示
c.
get:因为显示在地址栏，而地址栏的信息数据量是有限的，所以不可以提交大数据。
post:可以提交大体积的数据。
d.
get：会将信息封装到请求行，也就是http请求消息头之前。
post：会将信息封装到请求体，也就是http请求消息头之后。请求体和请求头之间是通过空行来进行分隔的。
表单一般使用post方法提交

标签属性的应用

1：段落位置的控制
p标签的align属性：文字的显示位置。
取值：left,center,right

2：网页背景的设置
body标签的属性
bgcolor：控制网页背景颜色
background：控制网页背景图片
text：控制网页文字颜色

3：水平分割线的设置
hr的属性
size：控制水平线的粗细。单位是像素。
width: 控制水平线的宽度
align：控制水平线的对齐方式
color：控制水平线颜色

滚动标签

<marquee></marquee> 控制滚动
bgcolor 背景颜色
Direction 滚动方向 left、right、up、down
Behavior 滚动方式scroll滚动、silde滑动、alternate摆动
Height 滚动对象高度，值为像素
Width 滚动对象宽度，值为像素
hspace 滚动对象到背景左右空白区域的宽度，值为像素
vspace 滚动对象到背景上下空白区域的宽度，值为像素
scrollamount滚动速度，值是数字，数字越大，速度越快
scrolldelay两次滚动之间的延迟时间，值为数字,单位是毫秒,数字越大，延迟时间越长
loop设定滚动次数，-1为一直滚动。
<marquee></marquee>内只能用<br>换行，不能用<p>

html中的其他的常用标签的使用

b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签比br标签多一行
div ：自动换行
span：在一行显示

框架标签的使用

<frameset>
- rows:按照行进行划分
<frameset rows="80,*">
- cols:按照列进行划分
<frameset cols="80,*">

 <frame>
``` - 具体显示的页面




<div class="se-preview-section-delimiter"></div>

- <frame name="lower_left" src="b.html">

“`

使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉

* <frameset rows="80,*">                        //把页面划分成上下两部分 
     <frame name="top" src="a.html">             //上面页面

    <frameset cols="150,*">                     //把下面部分划分成左右两部分
        <frame name="lower_left" src="b.html">  //左边的页面
        <frame name="lower_right" src="c.html"> //右边的页面
    </frameset> 
</frameset>

如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="d.html" target="right">超链接1</a>