前端三剑客之一 HTML~

一、HTML基础

1.认识HTML

HTML，即超文本标记语言 ，是构成网页内容的基石

超文本：比文本要强大，通过链接和交互式方式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图片,音频,或者自已经审阅过它的学者所加的评注、补充或脚注等等

一个标准的 HTML 网页通常包含以下基本结构

2.认识HTML标签

HTML 标签是构建网页内容的基石。它们是用来标记内容的类型和结构，从而让浏览器知道如何显示这些内容

标签名(body)放到<>中
开始标签和结束标签之间，写的是标签的内容
少数标签只有开始标签,称为单标签

3.HTML文件基本结构

html标签是整个html文件的根标签(最顶层标签)
head标签中写页面的属性
body标签中写的是页面上显示的内容
title 标签中写的是页面的标题

二、HTML快速入门

1.开发工具

链接: VS Code

2.HTML常见标签

标题标签h1-h6

html 复制代码

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

段落标签: p

html 复制代码

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Beatae dolorem natus minima eligendi. Explicabo,oluta corrupti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rep
    ellat, quibusdam quaeligendi ut magnam deserunt doloremque.</p>

换行标签: br

html 复制代码

我是br<br>
    你好

图片标签: img

html 复制代码

<img src="C:\Users\30775\OneDrive\图片\屏幕快照\萝莉.jpg" alt="这是一个萝莉" width="200px">

超链接: a

html 复制代码

<a href="http://www.baidu.com">百度</a>

表格标签

html 复制代码

<table>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>ccc</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>eee</td>
            <td>fff</td>
        </tr>
    </table>

表单标签

html 复制代码

<form action="test2.html" method="get">
        姓名：<input type="text" name="UserName" id="" placeholder="请输入姓名"></br>
        密码：<input type="password" name="password" id="" placeholder="请输入密码"></br>
        性别：<input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label><br>
        兴趣：<input type="checkbox" name="xq" id="ball1"><label for="ball1">排球</label>
        <input type="checkbox" name="xq" id="ball2">篮球
        <input type="checkbox" name="xq" id="ball3">乒乓球
        <input type="checkbox" name="xq" id="ball4">羽毛球<br>
        学历：<select name="sel">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
            <option value="4" selected="selected">高中以上</option>
        </select><br />
        个人简历：<textarea name="jianli" id="" rows="10" cols="100"></textarea><br />
        <!-- <input type="button" value="注册"> 
             <button>注册</button>  -->
        <input type="submit" value="注册">
    </form>

无语义标签: div&span

div 标签, division 的缩写，含义是分割

span 标签，含义是跨度

就是两个盒子，用于网页布局

div 是独占一行的，是一个大盒子
span 不独占一行，是一个小盒子

html 复制代码

<div>我是一个div1</div>
    <span>我是一个span1</span>
    <div>我是一个div2</div>
    <span>我是一个span2</span>

三、练习：用户注册

html 复制代码

<h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="number" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="button" value="注册">
        <span>已有账号？</span>
        <a href="#">登录</a>
    </div>

本期内容到此为止，喜欢的话请点个赞，谢谢观看！！！