初识HTML（新手入门）_html代码入门基础-CSDN博客

本文链接：https://blog.csdn.net/baichaji/article/details/128306350

1、什么是HTML

HTML是一种超文本标记语言（英文全称：HyperText Markup Language，简称：HTML），HTML是前端最基础的部分，但我们不能认为他就是不重要的，相反他是非常重要的。HTML可以说是页面的骨架（框架）。我们可以在HTML页面中船舰图片、链接、搭建页面主要框架等。HTML不属于编程语言，而是一种标记语言，

2、创建一个HTML页面

一个HTML页面有且仅有一个<html>,<head><body这三个标签，其中<html>是页面的根标签，<head>中定义了meta元数据，里面可以链接外部文件，例如css,js的文件，<title>标签是页面的标题<body>标签中包含了页面中的主要内容，下面就是HTML初始页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3、基础标签

3.1 标题标签

在HTML中表示标题的标签有六个，分别是h1-h6,代码如下，通过运行结果我们可以看出<h1>是一级标题，依次递减。

<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>

3.2 超链接标签

a标签是一个超链接标签，在点击标签时页面会跳转到所给的地址。

  <a href="#" target="_blank">超链接</a>

herf 属性中填写的是跳转地址
target属性是值页面在那里跳转，有四个值_blank,_self,_parent,_top，其中_self是指在当前窗口跳转，_blank是在新窗口打开，在不写target属性时默认在当前窗口打开。

3.3 图片标签

图片标签是<img>，该标签是一个单标签。

  <img src="./img/3.jpg" alt="和魂汉神">

src 是图片的路径
ait 是图片的替代文字，即在一些情况下突出不能展示时会出现文字

3.4 表单标签

文本框、密码框


    <input type="text" placeholder="请输入内容">
    <input type="password" placeholder="请输入密码">

type 是指input 框的类型，为text这位文本框，password这是密码框。
placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。

单选框、复选框

radio指的是单选框
checkbox是多选框

 <label for="gender">性别：</label>
 <input type="radio" name="gender">男
 <input type="radio" name="gender">女

 <label for="like">爱好</label>
 <input type="checkbox">游泳
 <input type="checkbox">阅读
 <input type="checkbox">绘画
 <input type="checkbox">跳舞

下拉列表

 <select name="address" id="address" >
     <option name="address" value="0" checked>请选择地区</option>
     <option name="address" value="1">北京</option>
     <option name="address" value="2">西安</option>
     <option name="address" value="3">上海</option>
     <option name="address" value="4">杭州</option>
 </select>

下拉列表需要select与option一起使用
当想要选定牧歌选项时，可在其标签里协商checked

文本域

 <input type="texteare" name="self">

3.5 列表

列表分为两种无序列表和有序列表，无序列表用ul>li 表示，有序列表则用ol>li表示。

    <!-- 无序列表 -->
    <ul>
        <li></li>
        <li></li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li></li>
        <li></li>
    </ol>

3.6 表格

   <table>
        <thead border="1px" cellpadding='0' cellspacing="'0" >
            <th >成绩单</th>
        </thead>
        <tbody>
            <tr>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>87</td>
                <td>78</td>
                <td>88</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>79</td>
                <td>84</td>
                <td>76</td>
            </tr>
        </tbody>
    </table>

colspan,rowspan可以合并行和列
tr表示行，td表示列
caption时标题

3.7 音频和视频

audio表示音频，video表示视频。

metud属性表示静音播放
autoplay属性指自动播放
controls属性如果出现，会向用户展示控件。
loop是循环播放

<video muted autoplay controls width="500px" height="400px">
     <source type="video/mp4" src="">
     <source type="video/ogg" src="">
</video>
<audio controls >
    <source type="audio/ogg" src="./img/y790.mp3">
    <source type="audio/mpeg" src="./img/y790.mp3">
</audio>

3.8 语义化标签

HTML5新增了语义化标签。为了方便阅读，在代码的书写时最好遵循语义化。

   <!-- toubu -->
   <header></header>
   <!-- 尾部 -->
   <footer></footer>
   <!-- 文章章节 -->
   <section></section>
   <!-- 侧边栏 -->
   <aside></aside>
   <!-- 整篇文章 -->
   <article></article>

3.9 容器元素

div span为容器元素，主要是存放其他元素。

容器元素可以包含所有元素
a元素几乎可以包含所有元素
一些元素有自己固定的子元素，例如列表元素ul ol
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

4、行级元素、块级元素、行内块元素

4.1 三者之间的转换方式

利用diaplay属性对三者进行转换

        /* 转为行快元素 */
       display: inline-block;
       /* 转为块级元素 */
       display: block;
       /* 转为行级元素 */
       display: inline;

4.2 行级元素

行级元素特点：

不可以设置宽高
不会进行自动换行，在空间与必须范围内会排在一行
可以设置margin的左右，不可以设置上下，可以设置padding的上下左右

行级元素有： a span img 等

4.3 块级元素

块级元素特点：

可以设置宽高
可以自动换行
多个块级元素一起写，默认排序方式从上至下
可以设置margin padding

块级元素有：h1-h6 p div ul ol li 等

4.4 行块级元素

行块级元素特点：

是行级元素与块级元素的集合体
可以设置宽高
可以在一行排列，默认从左到右