关于HTML

know what one is about

已于 2023-11-23 23:28:09 修改

阅读量123

点赞数 3

文章标签：前端 html

于 2023-11-23 23:14:58 首次发布

本文链接：https://blog.csdn.net/weixin_47027760/article/details/134584754

版权

一、HTML基础

1.1什么是HTML

HyperTextMarkupLang是超文本标记语言，用来构成一个"网页"的语言。由W3C(万维网)制定。

超文本: 指不仅仅是纯文本,还包括字体效果和多媒体(音频,视频和图片)相关

作用: 学习如何搭建页面结构和准备页面的内容, 相当于盖房子(毛坯房)

学习HTML主要学习的就是有哪些标签,以及标签的使用方法

标记语言特点：

<开始标签 属性名="值">标签体</结束标签>
<单标签/>

1.2 一个页面的基本结构:

<!DOCTYPE html> 文档声明: 告诉浏览器使用HTML哪个版本的标准解析页面,此写法代表使用html5的标准解析页面
<html lang="en">页面的跟标签,所有标签都写在此标签内部 
<head> 头标签, 给浏览器看的内容
    <meta charset="UTF-8"> 设置页面字符集
    <title>Title</title> 设置页面的标题
</head>
<body> 体标签, 给用户看的内容 
	
</body>
</html>

html标签是html页面的根标签，里面包含两个子标签head和body

head标签是头信息，用来指定页面的元数据，这里定义的东西都是给浏览器看的。包括后期用到的CSS，JS的加载

body标签是体信息，里面定义的内容都会呈现在浏览器中给用户看到。

1.3 HTML 常用标签介绍

文本相关标签：

<h1>-<h6>标签:标题。每级标题的字体大小不同，标题独占一行

<p> 段落标签p   独占一行,自带上下间距

<hr> 水平分割线hr

<b> 加粗b

<i> 斜体i

<br> 换行

<u> 下划线u

<s> 删除线s


列表标签：

无序列表: ul和li
例如：
<ul><!--unordered 无序 list 列表-->
    <li>刘备</li><!--list 列表 item 项-->
    <li>刘禅</li>
    <li>孙尚香</li>
</ul>

有序列表: ol和li
例如：
<ol>
    <li>java语言基础
        <ul>
            <li>变量</li>
            <li>数据类型</li>
            <li>运算符</li>
        </ul>
    </li>
    <li>java API</li>
    <li>Web前端
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
</ol>

列表嵌套: 有序列表和无序列表可以任意无限嵌套


<center>标签:将标签中间的内容全部基于浏览器居中显示。该标签在HTML5中已经不再
            建议使用了

<input>标签:输入组件，用于在浏览器中获取用户输入的组件。组件有多种，使用type属性
           定义不同输入组件，常用的有:
           type="text" 默认值，表示一个文本输入框
           type="password" 密码框
           type="button" 按钮
           type="submit" 提交表单按钮
           type="checkbox" 多选框
           type="radio" 单选框
           注:单选框和复选框使用name属性分组，名字相同的为一组。



<a>标签:超链接。标签中间的文本是超链接上提示的文字，属性href用于指定跳转路径
    超链接包裹文本为文本超链接,包裹图片为图片超链接
    页面内部跳转, 在目的地元素里面添加id,然后在超链接的href属性里面#id 这样就可以跳转到目的地元素的位置


<table>标签:表格。属性border用于指定边框。
            <table>标签中包含<tr>标签用于表示行
            <tr>标签中包含<td>标签用于表示列
            <th>表头，caption表格标题
            <td>标签中常见属性:
            align:对其方式。left左对齐,right右对齐,center剧中对其
            border 边框
            colspan:跨列合并列，合并是从左向右合并列
            rowspan:跨行合并列，合并是从上向下合并列

<img>标签:图片。属性src用于指定图片的路径

    相对路径: 访问站内资源使用

        图片和页面在同级目录: 直接写图片名

        图片在页面的上级目录: …/…/图片名

        图片在页面的下级目录: 文件夹名/图片名

    绝对路径: 一般访问站外资源使用, 又称为图片盗链, 有找不到图片的风险

    alt: 图片不能正常显示时显示的文本
    title:鼠标在图片上悬停时显示的文本
    width/height:设置图片的宽高, 两种方式:1.像素 2. 百分比 只设置宽度时高度会自动等比例缩放