HTML简单了解(1)

最新推荐文章于 2024-05-14 20:08:50 发布

一只大杯子呀

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量183

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/QQTSS/article/details/104662441

版权

1、html是超文本标记语言其作用是和浏览器进行沟通。

2、html的初始代码：

<!DOCTYPE html>         →（文档声明：告诉页面接下来要写html代码了）
<html lang="en">  		→（根标签：html的最外层标签，包装所有的其他标签
							lang表示当前是什么语言en zh-cn）
<head>					
    <meta charset="UTF-8">		→（meta : 元信息（辅助的信息）
                                	UTF-8 ：国际通用编码
                                	gb2312 gbk (这两个为了解编码，知道就行)）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">		→（需要适配移动端所写，一般情况下不需要改动）
    <title>Document</title>			→（网页名字，可改动Document为其他名称）
</head>
<body>			
    	→（内容显示区域 ）
</body>
</html>

3、html注释

可以把暂时不用的代码注释起来
可以用于信息提示
快捷键有：ctrl+/和shift+alt+a
在网页上不会显示！

4、一些常用

1、文本标题（h1-h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

2、段落文本

<p>段落文本内容</p>

标识一个段落(段落与段落之间有段间距)

3、文本修饰标签

 <strong></strong>  加粗
 <em></em>  斜体
 <sub>、<sup>： 下标文本、上标文本
 <del>、<ins>： 删除文本、插入文本

4、换行和水平线

 <br> : 单标签 , 让文本换行
 <hr> : 单标签 ，水平线

 <p>
 测试测试测试测试测试测试测  
 <br>
 <hr> 
  试测试测试测试从产生磁场
 </p>

在这里插入图片描述
5、图片标签

<img src="" alt="">
<img> :单标签
src=" ":图片链接地址（可以是网找的图复制下来图片链接就好）
alt=" ":当图片出现问题，出现的提示

6、链接

<a href=""></a>
<a></a> : 双标签
href="" : 链接地址
target="" : 跳转的方式 , 默认：当前窗口中 _self  新窗口打开 _blank

7、列表标签

标签分为三大类：
        1. 无序列表
            <ul></ul> : 双标签 -> 列表最外层容器的
            <li></li> : 双标签 -> 列表的子项
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                注意（重点）：ul 和 li 之间 不能添加其他标签

               快捷创建：ul>li

        2. 有序列表

            <ol></ol> : 双标签
            <li></li>

        3. 定义列表

            带有描述性标题的列表

            <dl>
                <dt></dt> : 描述标题
                <dd></dd> : 描述内容
            </dl>

<ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

在这里插入图片描述
8、表格


<table>：表格的最外层容器
    <tr> ： 定义表格行
    <th>： 定义表头
    <td>： 定义表格单元
    <caption>：定义表格标题

<table  border="1" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

在这里插入图片描述
以上就是今天关于HTML的简单了解

一只大杯子呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简单了解(1)

1、html是超文本标记语言其作用是和浏览器进行沟通。2、html的初始代码：<!DOCTYPE html> →（文档声明：告诉页面接下来要写html代码了）<html lang="en"> →（根标签：html的最外层标签，包装所有的其他标签 lang表示当前是什么语言en zh-cn）<head> ...
复制链接

扫一扫