Web前端HTML学习

什么是HTML?

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言: HyperText Markup Language
• HTML 不是一种编程语言，而是一种标记语言
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面

编码软件

 Visual Studio Code

个人推荐使用Visual Studio Code，开源免费，并且还有扩展插件，方面使用

HTML标签

<标签>内容</标签>

标签加内容 就是html中的 元素：html中有行内元素和块级元素

基础标签

h系列标签：h1-h5 是标题标签

p标签：段落标签

span标签：span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素

br换行标签：此标签没有开始标签直接在需要换行的标签后使用即可

hr水平标签：和br标签一样 没有开始标签

div标签 ：块标签

    <!-- 行内元素 -->
    <span>这是span标签</span>
    <a href="">这是a标签</a>
    <img src="" alt="" titile="">
    <!-- 块级元素 -->
    <div>这是一个div</div>
    <p>这是一个p标签</p>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
    <h5>这是h5标签</h5>

img标签：图片标签

        img标签里重要的属性：1.src 图片地址        2.alt 图片无法显示时显示文字        3.title  鼠标放在图片会有提示字

 img 图片地址路径有相对路径和绝对路径

绝对路径：目标文件在硬盘上的真实路径（最精确路径）

举个栗子：找到文件，右键点击后打开属性，可以看到我把喜欢的封面'cover1.jpg'储存在了路径_C:\Users\80975\OneDrive\Desktop\cover_
那么_C:\Users\80975\OneDrive\Desktop\cover\cover1.jpg _就是绝对路径

所以在html的图片引用中可以写

<!-- 用 / 或 \ 都可以 -->
<img src="C:\Users\80975\OneDrive\Desktop\cover\cover1.jpg" alt="cover1">

相对路径：相对于当前文件位置的路径

举个栗子：我不想用绝对路径，那么在html中要怎么写才能引用cover1.jpg呢？
这里要介绍一个等级概念,目录的上级(父级)，同级，下级（子级）。从这里开始，我们管文件夹叫目录(directory)

下级（子目录）：在web目录下，可以看到有一个用chrome打开的文件，我把它叫做test.html，那么test.html就叫做web目录的下级。
上级：web是test.html的上级目录
同级：web和cover1.jpg在同目录中，成为同级

table标签：表格标签

        tr 是表格标签里的行标签

        td 是表格标签里的列标签

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

表单

form标签

input标签

        input标签里type属性：

                1.text 一般文本框       

                2.radio 单选框，同一组单选框内的name必须一致，必需把value加上       

                3.checkbox 复选框       

                4.submit 提交按钮，需要注意用value来填写按钮名字       

                5.reset 重置按钮需要注意用value来填写按钮名字

selec - option 下拉列表标签，需要加value值

textarea 文本域

    <!-- 表单 -->
    <!-- 表单必须写在form内 -->
    <form action="#">
        <!-- 用户名 -->
        <span>用户名：</span><input type="text" name="username">
        <br>
        <!-- 搜索框 -->
        <!-- 性别 -->
        <span>性别</span>
        <input type="radio" name="gender" value="nan">男
        <input type="radio" name="gender" value="nv"> 女
        <input type="radio" name="gender" value="yy"> ?
        <!--  下拉列表-->
        <br>
        <span>爱好</span>
        <select name="aihao" id="">
            <option value="ball">打篮球</option>
            <option value="lol">LOL</option>
            <option value="msj">马杀鸡</option>
            <option value="cuozao">搓澡</option>
        </select>
        <br>
        <!-- 复选框 -->
        <span>职业</span>
        <input type="checkbox" value="bz" checked="checked">高分子数据拌匀
        <input type="checkbox" value="qjg">城市绿化员
        <input type="checkbox" value="mn">程序猿
        <input type="checkbox" value="ls">园丁
        <br>

        <!-- 密码 -->
        <span>密码：</span><input type="password">
        <br>

        <!-- 文本域 -->
        <span>个人说明</span>
        <textarea name="jk" id="" cols="30" rows="10" style="resize: none;" placeholder="啥啥啥"></textarea>
        <br>
        
        <!--  提交按钮-->
        <input type="submit" value="提交">
      
    </form>

button 按钮标签

        button标签里type属性：

                1.submit 提交按钮，和input标签属性里的submit不同的是按钮名字是写在标签中间的

                2.reset 重置按钮，和input标签属性里的reset不同的是按钮名字是写在标签中间的

<form>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>