HTML笔记

来源：互联网发布：类似于matlab的软件编辑：程序博客网时间：2024/06/06 06:47

1 HTML介绍
HTML是一种超文本标记语言。
超文本：比普通文本功能更加强大。
标记语言：使用一组标签对内容进行描述的一门语言，不是编程语言。

2 HTML的使用
语法和规范：

所有的html文件后缀名都是以.html或者。htm结尾的。建议使用.html结尾。
整个html文件分别由头部分< head> < / head>和体部分< body>< /body>组成。
html标签都是由开始标签和结束标签组成。
html标签忽略大小写，建议使用小写。

3 HTML相关标签学习
1 标题标签

<h1>公司简介</h1><br />

标题标签使用< hn>< /hn>,n从1到6逐渐变小。超过6的按6的进行显示。
特点：加粗加黑显示，单独占用一行，与其他行有一定的行间距。

2 水平线标签
水平线标签：< hr/>

<hr />

3 段落标签
段落标签：< p>< /p>

<p>Java的主要应用领域就是企业级的项目开发！</p>

4 字体标签
字体标签使用< font>< /font>
必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是16进制)
设置字体：face(前提是字体必须是本机已经有的)
设置大小：size(从1到7逐渐变大，超过7的部分按照7显示)

<font color="red" size="7">德玛西亚必胜！</font><br /><font color="#00FF00" face="楷体">德玛西亚必胜！</font><br />

注释的快捷键

ctrl+/

4 网站图片信息显示页面
图片标签< img />
图片的位置属性：src
绝对路径：带有盘符的
相对路径：
1如果是同级，直接写文件名或者./文件名称。
如果是上一级：../文件名称（如果是多层，那么多写几个../）
如果是下一级：写目录名称/文件名称
width:设置图片的宽度
height:设置图片的高度
alt:当图片无法正常显示的时候给出的提示信息。

<img src="../../img/logo2.png" width="150px" height="30" alt="加载失败"/>

5 网站友情链接页面
列表标签
有序列表：< ol>< /ol>
属性：type有5个取值start起始位置，reverse:倒序。

<ol start="4" reversed="reversed" type="a">    <li>CSDN</li>    <li>百度</li>    <li>阿里</li></ol>

无序列表：< ul>< /ul>
square方形块

<ul type="square">    <li>CSDN</li>    <li>百度</li>    <li>阿里</li></ul>

属性：type有三个取值。
超链接标签
< a href=”#” target=”_self / _blank”>点击跳转< /a> #号表示不发生跳转

6 网站布局
表格标签
表格标签的使用< table>< /table>
属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框间隔：cellspacing
边框与内容间隔：cellpadding
居中显示：align
表格跨行，跨列操作：rowspan，colspan（针对单元格）

<table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">            <tr height="100" bgcolor="gold">                <td>11</td>                <td>12</td>                <td>13</td>            </tr>            <tr>                <td>21</td>                <td>22</td>                <td>23</td>            </tr>            <tr>                <td>31</td>                <td>32</td>                <td>33</td>            </tr></table>

7 网站后台管理页面
框架集结构标签
< frameset>< /frameset>
属性：
cols:进行垂直切割划分，可以切割为任一块。（参数的值相加=100%，有一块可以用*表示）
rows：水平切割划分，可以切割为任一快。（参数的值相加=100%，其中有一块可以用*表示）
一旦划分区域之后，我们需要对具体的区域进行内容的填充，此时需要使用
< frame>< /frame>标签
属性：
src:指定该区域显示的文件（路径）
name:它通常会结合超链接的targer属性使用，来定义最终显示的位置。

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

top.html

<head>    <meta charset="UTF-8">    <title></title>    </head>    <body>        <font size="7">欢迎进入百度管理系统</font></body>

right.html

<head>    <meta charset="UTF-8">    <title></title>    </head>    <body>        所有用户信息</body>

left.html

<head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <a href="right.html" target="right">会员管理</a><br />        <a href="#">品牌管理</a><br />        <a href="#">商品管理</a><br />        <a href="#">分类管理</a><br />    </body>

8 form表单

<body>        <form action="#" method="get">            用户名：<input type="text" /><br />            密码：<input type="password" /><br />            确认密码：<input type="password" /><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 />            籍贯：<select name="province">                <option>--请选择--</option>                <option>北京</option>                <option>上海</option>                <option>广州</option>            </select><br />            自我介绍：            <textarea>            </textarea><br />            提交按钮:            <input type="submit"  value="注册"/><br />            普通按钮：<input type="button" value="regist" /><br />            重置按钮：<input type="reset" />        </form>    </body>

这里写图片描述

阅读全文

0 0