html简介

文章目录

- - html的简介

html的简介

什么是html

HyperText Markup Language：超文本标记语言，网页语言
超文本：超出文本范畴，使用html可以轻松实现这样的操作
标记：html所有的操作都是通过标记来实现的，标记就是标签
网页语言

第一个html程序：

html后缀是 .html 或者.htm
直接通过浏览器运行
例如:<font size="5" color="red">这是我的第一个html程序！ </font>

html的规范

1.一个html文件开始标签和结束的标签： </ht ml>

2.html包含两部分内容

设置相关信息
显示在页面上的内容都写在body里面

3.html的标签有开始标签，也要有结束标签

4.html代码不区分大小写

5.有些标签，没有结束标签，在标签内结束。例如：换行标签，< br/>

html的操作思想

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

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化

html中常用的标签

文字标签：修改文字的样式

<font> </font>

属性

size：文字的大小，取值范围1-7，如果超出，默认还是7

color：文字颜色，两种表示方法：英文和十六进制（通过工具可知）。

注释标签

html的注释（不在页面中显示）： 感叹号要是英文感叹号

标题标签

标题标签：<h1></h1> <h2></h2> ....<h6></h6>

从h1到h6，大小依次变小，同时会自动换行

水平线标签

<hr/>

size：表示水平线的粗细，取值范围1-7

color:与文字标签相同

例：<hr size="5" color="blue"/>

特殊字符

< ： < > ：>
空格：&nbsp；
& ： &amp

列表标签

<dl> </dl>：表示列表范围

在dl里面：<dt></dt>表示上层内容

在dl里面：<dd></dd>表示下层内容

例：

<dl>
    <dt>某某公司</dt>
    <dd>财务部</dd>
    <dd>人事部</dd>
    <dd>生产部</dd>
</dl>

效果：
某某公司
(缩进)财务部
(缩进)人事部
(缩进)生产部

<ol></ol>：有序列表的范围

属性 type：设置排序方式1（默认）,a（英文排序）,i(罗马数字)
在ol标签里面，<li>具体内容</li>

<ol>
    <li>财务部</li>
    <li>人事部</li>
    <li>生产部</li>
</ol>

效果：
1.财务部
2.人事部
3.生产部

<ol type="a">
    <li>财务部</li>
    <li>人事部</li>
    <li>生产部</li>
</ol>

效果：
a.财务部
b.人事部
c.生产部

<ul></ul>:无序列表的范围

属性：type：空心圆circle，实心圆disc(默认)，实心方块square
在ul里面，<li></li>

<ul type="circle">
    <li>财务部</li>
    <li>人事部</li>
    <li>生产部</li>
</ul>

效果：
○ 财务部
○人事部
○ 生产部

图像标签（重要）

<img src=”图片的路径” width=”图片宽度” height=”图片高度” alt=”图片上显示的文字”/>

alt：对于图片上文字显示，需要将鼠标移动到图片上，停留片刻，内容则会显示。有些浏览器不显示（没有效果）

路径的介绍：

绝对路径和相对路径

相对路径分三种情况：

1.html文件和图片在同一个路径下，直接下图片名称

2.图片在html文件的下层目录

例：C:\Users\asus\day01\code\ tt.html和C:\Users\asus\day01\code\ img\a.jpg

则写img\a.jpg

3.图片在html文件的上层目录

例：C:\Users\asus\day01\ code\tt.html和C:\Users\asus\day01\ a.jpg

则写…/a.jpg

其中…/表示上层路径(…/…/表示上层的上层，但这样表示没意义)

超链接标签

链接资源：<a href="链接到资源的路径">超链接名称 </a>

例：<a harf="hello.html">这个是超链接</a>

href:链接的资源的地址
target：设置链接打开的方式，默认是在当前页打开。_blank:在一个新窗口打开； _self：在当前页打开，默认

<a harf="hello.html" target=“_blank”>这个是超链接</a>

当超链接不需要到任何的地址，在harf里面加#号<a harf="#">这是另一个超链接</a>

定位资源

如果想要定位资源：1.定义一个位置<a name="top">顶部</a>2.回到这个位置<a harf="#top">回到顶部</a>

引入一个标签pre：原样输出，格式不会改变。<pre> 内容 </pre>

<html>
<head>
<title>HTML实例</title>
</head>
<body>
    <a name="top">顶部</a>
    <pre>
    1433341
    134141
    13414
    </pre>
    <a href="#top">回到顶部</a>
</body>
</html>

//若不用<pre>数组会输出到一列

表格标签（重要）

对数据进行格式化，使数据显示更加清晰

<table></table>:表示表格范围
在table里面：<tr></tr>表示一行，没有列的概念
在tr里面：<td></td>表示一个单元格，<th></th>也表示一个单元格，但是单元格中的内容会自动加粗居中
表格标题名设置表格标题

操作技巧：先数有几行，再数每行里有几个单元格

<table border="1" bordercolor="black" cellspacing="0" width="400" height="150">
<caption>人员信息</caption>
<tr align="center">
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
</tr>
<tr>
    <td aligen="right">张三</td>
    <td>男</td>
    <td>30</td>
</tr>
<tr>
    <th>李四</th>
    <th>男</th>
    <th>40</th>
</tr>
</table>

效果：

人员信息
李四	男	40
姓名	性别	年龄
张三	男	30

<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">

其中：

border:表格线粗细
bordercolor：表格线的颜色
cellspacing:单元格之间的举例
width：表格的宽度
height：表格的高度

<tr align="center">设置这一行中单元格里内容的对齐方式

设置对齐方式align：left，right，center

<td aligen="right">张三</td>设置这一个单元格中内容的对齐方法

合并单元格

rowspan：跨行
colspan：跨列

例:<td colspan="3">内容</td>表示合并这一行的3个单元格

例：<td rowspan="3">内容</td>表示合并从这个单元格开始这一行的3个单元格

表单标签（很重要）

提交数据到某网站的服务器，这个过程可以使用表单标签来实现

<form></form>：定义一个表单的范围

属性：action表示提交到的地址，默认提交到当前页面；method表示表单的提交方式，get和post方式，默认get；enctype，一般请求下不需要这个属性，做文件上传时需要设置这个属性（学文件上传时补充）

1.get请求地址栏会携带提交的数据，post不会携带（在请求体里，后续http协议时补充）

2.get请求安全级别低，post安全级别高

3.get请求数据大小有限制，post理论上没有限制

输入项：可以输入内容或者选择内容的部分，必须有name（控件）属性（为了将数据传到数据库，也就是发送数据）
大部分的输入项使用<input type="输入项的类型"/>

普通输入项：<input type="text"/>

密码输入项:<input type="password"/>

单选输入项:<input type="radio"/>,里面需要属性，且属性的属性值必须相同，必须有value（表示控件的值）值，用来接收数据。实现默认选中属性：check=“check”

复选输入项：<input type="checkbox"/>,里面需要属性，且属性的属性值必须相同，必须有value值。实现默认选中属性：check=“check”

文件输入项（待补充）:<input type="file"/>

隐藏项(具体作用后续补充):不会显示在页面上，但是存在于html代码中，<input type="hidden"/>

提交按钮：<input type="submit" value="注册"/>，若不加value则默认显示“提交查询内容”

下拉输入项（不在input标签中），实现默认选中属性：selected=“selected”

<select name="birth">
<option value="0">0</option> //显示“请选择'
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>

文本域：<textarea cols="10" rows="10"></textarea>,cols表示有多少列，rows表示有多少行

使用图片提交按钮：<input type="image" src="图片路径"/>

重置按钮（回到输入项的初始状态）：<input type="reset"/>,不加value则默认显示“重置”

普通按钮(和js一起使用)：<input type="button" value=“按钮名称”/>

html中其他的常用标签

b：加粗

例：<b>内容</b>，下同

s：删除线

u：下划线

i：斜体

p：段落标签，比br标签多换一行

pre：原样输出

sub：下标

sup：上标

例：2<sub>33</sub>,输出2₃₃

例2：5<sup>11</sup>,输出5¹¹

div:自动换行

span:在一行显示

html头标签的使用

html两部分组成，head和body，head里面的标签就是头标签

title标签：表示在标签上显示的内容

<title>标题</title>

<mate>标签：设置页面的一些相关内容

例:<meta http-equiv="refresh" content="3;url=hello.html"/>表示3秒钟后自动跳转到页面hello.html中

base标签：设置超链接的基本设置

例：<base target="_blank"/>表示超链接的打开方式都为新页面打开，统一设置了超链接的打开方式

link标签：引入css文件（后续补充）

框架标签

框架标签不能写在body里，所有有框架标签就不能有body，所以尽量不用

今天的文章html简介分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/66910.html