学习JavaScript之html详解（1）

2018-03-18 本文已影响0人付凯强

1. HTML是什么

HTML的全称是HyperText Mark-up Language，翻译过来就是超文本标记型语言。
超文本指的是超出文本的范畴，标记：理解为标签，html中所有的操作都是通过标签来实现的。
html是做网页。

2. 第一个HTML程序

创建hello.html,利用编辑工具NotePad编辑，输入一下代码，点击保存，点击运行，选择自己有的浏览器即可。

<font color="black" size = "5">这是我的第一个html程序</font>

3. HTML遵循的规范

1.HTML程序以<html>开始，同时以</html>结束
2.HTML程序包含两部分内容：head和body，代码如下：

<html>
    <head>设置页面上的信息</head>
    <body>显示到页面上的内容</body>
</html>

3.html的标签有开始标签，同时也要有结束标签，代码如下：

    <html>
<head>
    <title>html程序</title> 
</head>
<body>
    <font color="red" size = "5">这是我的第一个html程序</font>
</body>

</html>

4.html代码是不区分大小写的

4. 操作思想

网页中可能有很多的数据，不同的数据可能有不同的显示效果，这个时候需要使用标签把我们需要操作的数据包起来（封装），通过修改标签的的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。

<html>

<head>
    <title>html程序</title> 
</head>
<body>
    <font color="red" size = "5">这是我的第一个html程序</font>
    <font color="green" size = "15">这是我的第一个html程序</font>
</body>

</html>

5. 字体标签<font>

1.<font color = "设置文字颜色" size = "文字的大小">要操作的文字的内容</font>

<font color="green" size = "15">这是我的第一个html程序</font>
 
 两个属性 color:设置文字的颜色  size:设置文字的大小

2.color 有三种表现方式：

直接使用英文单词进行表示 red green yello
使用十六进制数字表示 #33cc66

<font color="#33cc66" size = "15">这是我的第一个html程序</font>

使用RGB颜色值配置 rgb（255,255.0）

<font color="rgb(255,255,0)" size = "15">颜色的第三种表示方法</font>

注意：属性值size的范围是1-7，就算是写为大于7的数字，还是会呈现7的大小

6. 标题标签

<html>
<head>
    <title>html程序</title> 
</head>
<body>
    <h1>这是标题一</h1>
    <h2>这是标题二</h2>
    <h6>这是标题三</h6>
</body>
</html>

标题标签可以自动换行，从h1到h6字体的大小越来越小
标题标签自动换行

7. 水平线标签

<hr/>

需要在标签内结束
属性：color ：表示设置水平线的颜色 size：设置水平线的粗细，范围是1-7

<hr color = "red" size = "7" />

8. 注释标签

java中有三种注释：单行注释，多行注释，文档注释
在html中的注释不会在页面中进行显示

<html>

<head>
    <title>html程序</title> 
</head>
<body>
    <!--这是html的注释 --> 
    <hr color = "red" size = "7" />
</body>

</html>

9. 特殊字符

实现空格的操作 &nbsp

<font color = "red" size  = "5" > 实现空格&nbsp&nbsp&nbsp的操作</font>

10. 列表标签

想要实现以下效果（去掉---以后呈现的等级效果）：
----逍遥派
--------无崖子
--------丁春秋
--------虚竹
首先需要使用<dl></dl> :定义列表的范围
之后在dl标签里面，<dt></dt> :定义上层的内容
在dl标签里面，<dd></dd> :定义下层的内容

<html>
<head>
    <title>html程序</title> 
</head>
<body>
    <dl>
    <dt>逍遥派</dt>
        <dd>无崖子</dd>
        <dd>丁春秋</dd>
        <dd>虚竹</dd>
    </dl>
</body>

</html>

11. 有序列表标签

想要实现以下效果
（1）
1.java
2.Android
3.ios
（2）
i. java
ii. Android
iii. ios
（3）
a. java
b. Android
c. ios
*** 使用<ol></ol>:定义有序列表的范围
1.ol标签的属性：type
2.决定排列的方式type默认="1",还可以写成字母type="a"还可以写成罗马数字type=“i”
*** 之后在ol标签里面：<li></li>:封装具体的内容

<ol>
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ol>

<ol type = "a">
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ol>

<ol type = "i">
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ol>

12. 无序列表标签

想要实现以下效果:
（特殊符号）ios
（特殊符号）JS
（特殊符号）Android
*** 首先使用标签<ul></ul>:定义无序列表的范围
****** ul标签上面有属性 type ：设置特殊的复合
****** type属性里面的值 disc circle square
*** 之后在ul标签里面：<li></li>:封装具体的内容

<ul type = "disc">
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ul>

<ul type = "circle ">
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ul>

<ul type = "square">
    <li>无崖子</li>
    <li>丁春秋</li>
    <li>虚竹</li>
</ul>

13. 图形标签

在HTML中显示图片

<html>
<head>
    <title>图形标签</title>
</head>
<body>
    <img src = "1.png"/>
</body>
</html>

属性

src：图片的路径名称
width：图片的宽度
height：图片的高度
border：图片的边框的粗细
alt：鼠标移动到图片上面，显示在图片上的内容；另外当图片找不到的时候，图片上会显示这个内容；某些浏览器下不支持。

<html>
<head>
    <title>图形标签</title>
</head>
<body>
    <img src = "1.png" width = "500" height = "500" border = "5" alt = "这是孙悟空"/>
</body>
</html>

14. 什么是超链接标签

点击打开新的内容

实现代码

<html>
<head>
    <title>图形标签</title>
</head>
<body>
    <a href = "hello.html">显示在页面上的内容</a>
</body>
</html>

属性

href ：链接到地址
target ：超链接的打开方式
在默认的情况下，打开方式是在当前页面打开
target里面的值：_self指的是在当前的页面打开 _blank指的是在新的标签页打开

<html>
<head>
    <title>图形标签</title>
</head>
<body>
    <a href = "hello.html" target = "blank">显示在页面上的内容</a>
</body>
</html>

15. 表格标签

对数据进行格式化，使数据显示更加清晰，结构分明。
表格标签可以用工具生成

表格标签中的标签

首先定义表格的范围：<table></table>
属性：
1. border：设置表格线
2. bordercolor：设置表格线的颜色
3. cellspacing：设置单元格之间的距离
4. cellpadding: 设置文字和单元格之间的距离
5. width：设置表格的宽度
6. height：设置表格的高度
在table标签里面表示行：<tr></tr>
属性：
1. align：设置对齐方式，值left center right
在tr里面表示列：<td></td>
属性：
1. aligh：设置单元格的左右对齐方式 left center right
2. valign：设置单元格的上中下对齐方式 bottom top middle
在tr标签里面也可以表示单元格: <th> </th> 居中加粗的效果

<html>
<head>
    <title>表格标签</title>
</head>
<body>
    <table>
    
    <tr>
    <td>姓名</td>
    <td>年龄</td>
    </tr>
    
    <tr>
    <td>张三</td>
    <td>李四</td>
    </tr>
    
    <tr>
    <td>王五</td>
    <td>赵六</td>
    </tr>
    
    <tr>
    <td>15</td>
    <td>16</td>
    </tr>
    
    </table>
</body>
</html>

<html>
<head>
    <title>表格标签：添加表格线</title>
</head>
<body>
    <table border = "1" bordercolor = "blue" cellspacing="0">
    
    <tr align = "center">
    <th>姓名</th>
    <th>年龄</th>
    </tr>
    
    <tr>
    <td>张三</td>
    <td>李四</td>
    </tr>
    
    <tr>
    <td>王五</td>
    <td>赵六</td>
    </tr>
    
    <tr>
    <td align = "center">15</td>
    <td>16</td>
    </tr>
    
    </table>
</body>
</html>

合并单元格

是在td标签上面进行的操作，使用两个属性 rowspan：跨行 colspan：跨列
操作技巧：首先数表格里面有多少行，数每行里面有多少个单元格

<html>
<head>
    <title>表格标签</title>
</head>
<body>
    <!--有多少行：4行 每行有多少个单元格：第一行有三个，第二行到第四行有两个-->
    <table border = "1" bordercolor = "blue" cellspacing = "0" cellpadding="2" width = "400" height = "400">
    
    <tr>
    <th>姓名</td>
    <th>年龄</td>
    <th rowspan = "4">性别</th>
    </tr>
    
    <tr>
    <td>张三</td>
    <td>13</td>
    </tr>
    
    <tr>
    <td>王五</td>
    <td>15</td>
    </tr>
    
    <tr>
    <td>李四</td>
    <td>14</td>
    </tr>
    
    </table>
</body>
</html>

<html>
<head>
    <title>表格标签</title>
</head>
<body>
    <!--有多少行：4行 每行有多少个单元格：第一行第二行第三行有三个，第四行有一个-->
    <table border = "1" bordercolor = "blue" cellspacing = "0" cellpadding="2" width = "400" height = "400">
    
    <tr>
    <th>姓名</td>
    <th>年龄</td>
    <th>性别</th>
    </tr>
    
    <tr>
    <td>张三</td>
    <td>13</td>
    <td>男</td>
    </tr>
    
    <tr>
    <td>王五</td>
    <td>15</td>
    <td>女</td>
    </tr>
    
    <tr>
    <td colspan = "3">个人信息</td>
    </tr>
    
    </table>
</body>
</html>

标题标签

<caption>标题内容</caption> 写在table里面

    <caption>人员信息</caption>

16. 表单标签

把我们填写的信息提交到服务器上，这个过程，我们称之为表单。

form 标签：
如果写表单，首先定义表单的范围。
action：提交到服务器的地址；
method：表单的提交方式（get和post两种）

<form action="helloworld.html" method="post"></form>

输入项：
可以输入内容或者选择内容的地方，大部分输入项是通过input标签进行封装操作的。
样式：<input type = "输入项的内容"/>
1.普通输入项：<input type = "text"/>
2.密码输入项：<input type = "password">
3.单选输入项：单选输入项里面必须有name属性，同时name的属性值必须要相同。

<input type="radio" name="sex" />男<input type="radio" name="sex" />女

4.复选输入项：

<input type="checkbox" name="sex" />男<input type="checkbox" name="sex" />女

5.文件输入项：

<input type = "file">

6.隐藏项：这个值不会显示在页面上，但是提交表单也可以提交到服务器上

 <input type="hidden"/>

7.普通按钮

  <input type="button" value="普通按钮"/>

8.提交按钮和其他按钮

    <input type="submit" value="提交"/>
<input type="reset" value="重置"/> 
不是做清空表单输入项的操作，使表单输入项回到原始状态。

9.提交必须注意的两点
1. 输入项里面必须有name属性。
2. 在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value
10.使用图片来进行提交
<input type = "image" src = "图片的路径">

下面的两个输入项不是使用input标签进行封装的。

1.下拉选择输入项

    <select >
        <option >AAA</option>
        <option >BBB</option>
        <option >CCC</option>
    </select>

*** 属性：
selected = "selected" 表示默认被选中。
<select multiple = 'multiple'>多选项可以选择

2.文本域

<textarea cols="30" rows="10"></textarea>

设置单选框、复选框、选择输入项为某个默认值

单选框和复选框利用属性checked = "checkded"
选择输入项利用属性selected="selected"

17. 其他标签

pre标签-原样输出标签

    <pre>
        public static void main(String[] args){
            System.out.....
        }
    </pre>

p 段落标签
s 删除标签
u 下划线
b 加粗
i 斜体
div标签自动换行
span标签在一行进行显示

18. 补充知识

1. 常用快捷键

Ctrl+E：打开我的电脑
Ctrl+Tab：浏览器的标签之间来回切换
F2：对文件重命名
Tab：补全代码键
Ctrl+/：注释
F11：全屏

2. 常用标签

<p>段落标签</p>
<h1>标题标签</h1> zh
<em>文本倾斜标签</em>   
<strong>文本加粗标签</strong>  
<del>删除线</del>
<ins>下划线标签</ins>
2<sup>3</sup> ——  2的三次幂
h<sub>2</sub>O --- 水的化学表达式

3. 相对路径

当HTML文件和图片在同一个目录下的时候，引入图片（src）直接写图片名称即可。
当图片在HTML的下一层目录下的时候，引入图片（src）直接写HTML所在目录的名称+“/”+图片的名称。
当图片在HTML的上一层目录下的时候，引入图片（src）直接写“../”+图片名称。

4. 锚链接

<p id = "sd">你好你好你好你好你好你好你好你好</p>
<a href = "#sd">返回顶部</a>

5. 空链(不知道链接到哪个页面的时候，用空链)

< <a href="#">空链</a>

6. 压缩文件的下载（知道就行，工作中不用）

<a href="压缩.zip">压缩包下载</a>

7. 超链接优化写法（所有页面都在新页面打开）

<base target = "-_blank">

8. 特殊字符

例如（遇到查询即可）：
空格符 &nbsp——空格 < 小于号——&lt > 大于号——&qt

9. 音乐标签

<embed src="houlai.mp3" hidden="true"/>

10. 滚动

<marquee behavior="slide" direction="right">ffffffffffffffffffff</marquee>
<marquee behavior="slide" direction="right"><img src="IMAGE/first.png"></marquee>

11. meta标签

关键字
<meta name="keywords" content = "安卓,WEB前端,IOS">
keyowrds关键字的代表
安卓,WEB前端,IOS SEO搜索引擎排名所需的关键字

网页描述
<meta name="description" content="WEB前端是一个大趋势"/>

网页重定向：跳转到其他网页
<meta http-equiv="refresh" content="5;http://wwww.baidu.com">

12. link标签

链接外部表文件

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

设置icon标题图标

<link rel="icon" href="IMAGE/first.png">

作者的名字

<meta name="Author" content="你的姓名">

搜索引擎的爬虫设置

<meta name="Robots" content="all/none/index/onindex/nofollow">

13. 表格的标准结构（了解下）

thead tbody tfoot

<!DOCTYPE html>
<html>
<head lang="en">
    <title>表格的标准结构</title>
</head>
<body>
<table border="1" cellspacing="0">
    <thead>
    <tr bgcolor="red">
        <td>
            你们
        </td>
        <td>
            他们
        </td>
        <td>
            我们
        </td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>
            i
        </td>
        <td>
            ii
        </td>
        <td>
            iii
        </td>
    </tr>
    </tfoot>
</table>
</body>
</html>

14. 细边框的表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table tr th{background: white;height: 200px;}
        table tr td{background: white;height: 200px;}
    </style>
</head>
<body>
    <table width="500" cellspacing="1" bgcolor="green">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
            <td>55</td>
        </tr>
    </table>
</body>
</html>

15. 表单

作用：收集信息
表单域：表单的区域

maxlength：input的属性：控制输入字符的最大长度。

readonly = "readonly"：只读属性无法编辑

disabled = "disabled": 输入框未激活状态

name = "" : 用于区分的标志

value = "" :输入框的值

select 中的属性 multiple = "multiple" 指下拉多选

对下拉别表内容进行分组：optgroup 对下拉列表标签进行分组

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单示例_分组</title>
</head>
<body>
<select name="" id="" multiple="multiple">
    <optgroup label="北京市">
        <option>朝阳区</option>
        <option>昌平区</option>
        <option>海淀区</option>
        <option>通州区</option>
    </optgroup>
</select>
</body>
</html>

对form表单标签里面的子标签进行分组：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单示例_分组</title>
</head>
<body>
<form action="">
    <fieldset>
        <legend>分组信息</legend>
        <select name="" id="" multiple="multiple">
            <optgroup label="北京市">
                <option>朝阳区</option>
                <option>昌平区</option>
                <option>海淀区</option>
                <option>通州区</option>
            </optgroup>
        </select>
        <input type="button" value="你哈"/>
    </fieldset>
</form>
</body>
</html>

form标签里面的控件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML 5 表单控件</title>
</head>
<body>
<form action="hello.html" method="post">

    <!-- 网址控件-->
    <input type="url"/>
    <!-- 日期控件-->
    <input type="date"/>
    <!-- 时间控件控件-->
    <input type="time"/>
    <!-- 数字控件-->
    <input type="number"step = "5"/>
    <!-- 邮件控件-->
    <input type="email"/>
    <!-- 滑块控件-->
    <input type="range"/>


</form>
</body>
</html>

16. 推荐关于html的第二篇博客

https://www.jianshu.com/p/e1b5294c316e