HTML基础

最新推荐文章于 2022-07-27 18:33:48 发布

王子泉呀

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_42068654/article/details/82118202

版权

HTML

1.什么是HTML

HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。

2.HTML文件结构

是以 .html 或 .htm 结尾的文本文件

格式：

标签一般成对出现：<标签名> </标签名>
<html></html>是最外层的标签，其他标签都在它内部
DOCTYPE是用来说明HTML的版本
HTML由head和body子标签组成。其中head标签主要是网页中与内容无关的部分，用来引入外部的样式和脚本文件, 还可以用来定义编码和标题。body标签里写的是要显示的内容部分。
建议开发时使用chrome（谷歌），firefox（火狐）浏览器。

例如：版本HTML5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
HelloWorld!
</body>
</html>

版本HTML4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

3.常用标签

3.1标题标签

<h1><h2>...<h6>：由1号标题到6号标题，字号依次减小。

3.2段落标签

<p></p>：主要起到换行的作用。

3.3分隔符、换行符

<hr>：分隔符，一道横线。
<br>：换行符。

3.4标签的属性

格式：在标签<>内部属性名=“属性值” ，用来定义标签的长，宽，高，颜色等。
取值是boolean的属性：

checked，配合单选按钮、复选按钮使用,代表默认选中
selected，配合option标签使用，代表默认选中
readonly，可以配合大部分表单标签使用，表示只读
disabled，类似只读，表示禁用，区别在于表单提交时不会提交disabled属性的数据，若加在按钮上为禁用该按钮
required，表示该文本为必填项，若为空，则不允许提交表单

3.5常用转义字符

小于号（<）：<
大于号（>）：>
空格： 

3.6图片标签

格式：

<img src="" alt="">//src属性代表图片路径,alt属性代表图片访问不到时的提示文字

3.7超链接

3.7.1两个网页之间跳转

格式：

<a href="目标网页地址">超链接提示文字</a>

3.7.2网页内跳转（锚点）

格式：

<a href="#另一个标签的id属性值">超链接提示文字</a>

3.7.3超链接图片跳转

格式：

<a href="目标网页地址"> <img src="图片路径" alt="无法显示图片时的提示文字">
</a>

3.8列表

3.8.1有序列表（order）

格式：

<ol>
   <li>列表项</li>
</ol>

3.8.2无序列表 (unorder)

格式：

<ul>
   <li>列表项</li>
</ul>

3.9表格

格式：

<table>
    <thead></thead>  
    <tbody></tbody>  
    <tfoot></tfoot>  
</table>
//其中 thead, tbody, tfoot 里都可以分为行<tr>与列<td>，<th>类似<td>，默认居中并加粗
<tbody>
    <tr>
        <td>1,1</td><td>1,2</td>
    </tr>
    <tr>
        <td>2,1</td><td>2,2</td>
    </tr>
</tbody>

IDEA生成表格的快捷写法：

// table>tbody>tr*行数>td*列数+Tab键 //生成BODY为N行N列的表格;
// table>(thead>tr>td*列数)+(tbody>tr*行数>td*列数) //生成HEAD为N列，BODY为N行N列的表格;
// table[border=1][width=100%]>tbody>tr*行数>td*列数 //生成带有边框属性为1，宽度属性为100%的BODY为N行N列的表格;

合并列：

<table border="1" width="100%">
    <tbody>
    <tr>
        <!--colspan=2 将两个td合并为一个-->
        <td colspan="2">行1列1</td>
        <td>ss</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
    </tr>
    </tbody>
</table>

合并行：

<table border="1" width="100%">
    <tbody>
    <tr>
        <td rowspan="2">行1列1</td>
        <td>行1列2</td>
    </tr>
    <tr>

        <td>行2列2</td>
    </tr>
    </tbody>
</table>

3.10表单

用来收集用户录入的信息

1）<input type="text"> 文本框标签
2）input type="password" 密码框标签
3）input type="radio" 单选按钮
例：

<!-- name取值相同的单选按钮为同一组，checked 表示是否默认选中
对于这种取值只有“是否”这两种情况的属性有两种写法：一种是只写属性名，另一种是属性名="属性值"
-->
<p>男<input type="radio" name="sex" checked="checked">  
   女<input type="radio" name="sex">
</p>
<p>未婚<input type="radio" name="married">  
   已婚<input type="radio" name="married" checked> 
   离婚<input type="radio" name="married">
</p>

4）<input type="checkbox"> 复选按钮
例：

<!-- name取值相同的复选按钮为同一组, 同样用checked表示是否默认选中-->
<p>
    读书<input type="checkbox" name="hobby">
    玩游戏<input type="checkbox" name="hobby">
    听音乐<input type="checkbox" name="hobby">
    敲代码<input type="checkbox" name="hobby" checked>
</p>

5）<input type="email"> 邮件标签
6）<input type="date" value="日期初始值"> 选择日期标签
7）<input type="time" value="时间初始值"> 选择时间标签
8）<input type="file"> 选择文件标签
9）<input type="button" value="按钮文字">按钮
<button>按钮文字</button> 按钮
10）<input type="reset" value="重置"> 重置按钮，把表单所有填写的内容重置到初始状态
11）<input type="submit" value="提交"> 提交按钮，把表单填写的信息发送给服务器
12）<select> <option>值1</option> <option>值2</option> .... <option>值n</option> </select>
下拉列表标签，属性selected为默认选中
13）<textarea cols="宽" rows="高"></textarea> 文本域标签，适合输入多行文本内容

王子泉呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML1.什么是HTMLHTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。2.HTML文件结构是以 .html 或 .htm 结尾的文本文件格式：标签一般成对出...
复制链接

扫一扫