前端随笔初识前端HTML

最新推荐文章于 2022-12-05 11:45:04 发布

磕磕...碰碰

最新推荐文章于 2022-12-05 11:45:04 发布

阅读量289

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/kekepengpeng97/article/details/100622178

版权

<!DOCTYPE html>
<!-- 申明文档类型，说明是html文档类型 -->
<html lang="en">
<!-- 说明我们写的是html标记语言 -->
<head>
<!-- 文件的头部，head里面写的是文档描述信息 -->
<meta charset="UTF-8">
<!-- 元信息，charset是编码格式，UTF-8国际性通用编码格式，gbk，gb2312 -->
<title>百度一下，你就知道</title>
<!-- 文档的标题，显示在状态栏上 -->
</head>
<body>
<!-- 文件的主体，所有页面内的可见内容都是放在body里面 -->
     </body>
</html>
 html语言分成两部分
    标签（标记，元素）
        长在尖括号后面的第一个单词
    属性
        长在标签后面，用空格隔开的那个单词

html文件分成两部分
    头部
        head，放描述性信息
    主体
        body，放可见的内容（结构）

html标签分成两种
    常规标签（双标签）
        <标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>

    空标签（单标签）
        <标签名 属性1="属性值1" 属性2="属性值2">
        
    标签名写在尖括号里面
    属性和标签用空格隔开
    属性和属性值用等号连接，属性值用引号包住
    如果一个标签有多个属性，属性和属性用空格隔开
    属性和属性是不分先后顺序的
    
     1.标题标签（h1-h6）双标签
    都加粗
    h1到h6字体大小逐渐变小
    标题标签都是独占一行
    都有默认的上下间距

    h1标签在同一个页面里面只能出现一次
    seo，搜索引擎的优化

2.段落文本标签（p）双标签
    每一个p标签独占一行
    默认的上下间距

3.转义符号
    空格  &nbsp;
    尖括号  &lt; &gt;
    &copy;

4.强制换行
    <br>  单标签

5.水平分割线
    <hr>  单标签
        加水平分割线，强制换行

6.加粗标签  双标签
    <b></b>
    <strong></strong>

    b标签为了加粗的样子而加粗
    strong标签为了加强语气而加粗

7.倾斜标签   双标签
    <i></i>
    <em></em>

    i标签为了倾斜的样子而倾斜
    em标签为了加强语气而倾斜

8.扩展
    <u>文本</u>下划线  
    <del>文本</del>删除线
    <s>文本</s>删除线
    <sub></sub>下标
    <sup></sup>上标
 9. 列表
    无序列表
        <ul>
            <li></li>
            <li></li>    
        </ul>

        特点：每一个li都是独占一行
            每一个li前面都有一个黑色的实心圆点（列表符号）

    有序列表
        <ol type="" start="">
            <li></li>
            <li></li>    
        </ol>

        属性 
            type  默认值是1   1,2,3,4
                    a        a,b,c,d
                    A        A,B,C,D
                    i        i,ii,iii,iv
                    I        I,II,III,IV
            start  从第几个开始 只能是数字

    自定义列表
        <dl>
            <dt>名词</dt>
            <dd>解释</dd>
        </dl>
    
     图片标签  单标签
    <img src="图片的路径" alt="" title="">

    src：图片的路径，绝对路径或者相对路径

    alt: 当图片因为网络原因或者自身损坏或者路径错误时，显示提示文字

    title: 当鼠标悬浮时的提示文字

    特点：
        不是独占一行，从左往右排列

超链接
    <a href="跳转的地址" target="_blank">文字或者图片</a>

    href: 跳转的地址，前面必须有协议

    target: _self   默认值，在当前页面打开
            _blank   在新窗口打开

    双标签

    a标签里面可以是文字，也可以是图片
    鼠标移入是默认会变成手指
    从左往右排列