HTML 初识

段落标签

<p>
    <!-- 段落标签 -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
  </p>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nam assumenda harum voluptate vel minus nesciunt aspernatur, expedita reiciendis officiis exercitationem odit at fugit eos voluptatum nisi voluptatem dolorem labore.
  </p>

使用可以分段，在其中输入多个空格或者换行都只是相当于输入一个空格。

空格符

如果要有多个空格，则需要使用HTML的空格符：

下面是示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>我的第一个HTLM文件</title>
</head>
<body>
    <!-- <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    <h4>四级标题</h1>
    <h5>五级标题</h1>
    <h6>六级标题</h1> -->
    <p>
    <!-- 段落标签 -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
    </p>
    <p>
    <!-- &nbsp; 非断行空格 -->
      &nbsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sapiente fugiat excepturi, qui amet laboriosam necessitatibus, tempore officia ipsa hic numquam asperiores, eaque quae velit doloribus illum modi! Cum, aspernatur.
    
    </p>
     <!-- &ensp; 半角空格，宽度为当前字体的一半 -->
    &ensp;  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea iste architecto incidunt. Numquam, earum, autem vero aliquid reprehenderit repudiandae voluptatibus quasi minus repellendus quod provident itaque a iure illum beatae.
     
    <p>
    <!-- &emsp; 全角空格，宽度等于当前字体-->
    &emsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugiat aliquam delectus veritatis tempore. Laboriosam veniam odit laborum officiis sed est temporibus quas, ducimus alias culpa voluptatibus ad illum libero.
    </p>
    <p>
        <!-- &thinsp;窄空格，宽度小于一个字符 -->
        &thinsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolor tempore nobis, eius consequatur veniam quasi id? Quae, rerum voluptatibus inventore accusantium tempore sapiente temporibus! Officia autem ducimus error magni.
    </p>
</body>
</html>

可以自行比对一下这些空格符号的区别。

换行符

换行符 或者 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>
    <p>
        第一行<br/>
        第二行<br>
        第三行
    </p>
</body>
</html>

下面是刷新后的页面显示：

图片标签

<img src="" alt="" width="" height="">

img：标签。src、alt：标签的属性，width、teight：宽度和高度，只设置一个会高宽等比例缩放

src可以填本机的图片的绝对路径，也能复制网上的图片链接。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>第一个HTLM文件</title>

</head>

<body>

    <img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="这是一个图片">




</body>

</html>

运行结果可以自行试试。

超链接：a

外部链接

<a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9">百度</a>

href：表示点击后会跳转到哪个页面，

target：打开方式，默认_self，如果是_blank，则用新标签页打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>

       <a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9" target="_blank">百度</a>

</body>
</html>

href内填的是网页的连接地址，target是转跳方式，在这里_blank是以新页面打开超链接。

内部链接

<a href="test1.html" target="_blank">test1</a>

test1.html是本机上的一个html文件，我们也可以通过指定本机的绝对路径或者是相对路径进行转跳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>
   
    <a href="test1.html"  target="_blank">test1</a><br>
    
</body>
</html>

下载文件

<a href="1.rar">下载文件</a>

href链接如果是个压缩包，点击链接可以下载对应路径下已经已创建的压缩文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>

    <a href="1.rar">下载文件</a>

</body>
</html>

表格标签

table标签：表示表格

tr：表示表格的一行

tb：表示一个单元格

thead：表格的头部区域

tbody：表格的主题区域

table包含tr、tr包含tb

table的参数：style可以设置表格的长宽，border设置线的粗细和颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>

    <table style="width: 500px;  height: 400;" border="1px black">
         <tr>
            <td colspan="2">a</td>
            <!-- <td>b</td> -->
        </tr>
        <tr>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>e</td>
            <td>f</td>
        </tr>
        <tr>
            <td>g</td>
            <td>h</td>
        </tr>
        <tr>
            <td>i</td>
            <td>j</td>
        </tr>

    </table>

</body>
</html>

生成的单元格长这样：

如果不想要边框，我们可以在table接着添加其他的参数，如：cellspacing = "0"可以去掉空白线

<table style="width: 500px; height: 400;" border="1px black" cellspacing = "0">

单元格合并

<tr>

<td colspan="2">a</td>



</tr>

td标签里添加colspan = ""与rowspan=""标签可以选择合并单元格行列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个HTLM文件</title>
</head>
<body>

    <table style="width: 500px;  height: 400;" border="1px black" cellspacing = "0">
        <tr>
            <td colspan="2">a</td>
            <!-- <td>b</td> -->
        </tr>
        <tr>
            <td>c</td>
            <td rowspan="3">d</td>
        </tr>
        <tr>
            <td>e</td>
            <!-- <td>f</td> -->
        </tr>
        <tr>
            <td>g</td>
            <!-- <td>h</td> -->
        </tr>
        <tr>
            <td>i</td>
            <td>j</td>
        </tr>

    </table>

</body>
</html>

表单标签

1：表单域

包含表单元素的区域.重点是form标签

2：表单控件

输⼊框,提交按钮等.重点是input标签

<form action="test.html">
 ... [form 
的内容
]
 </form>

描述了要把数据按照什么⽅式,提交到哪个⻚⾯中

input 标签

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框。

type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.。

name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀。

value:input中的默认值，传递给后端判断前端的选择。

checked:默认被选中.(⽤于单选按钮和多选按钮)。

selected：默认被选中值。

placeholder：在输入框里显示的字体。

用户名(文本框)text

<input type="text" size="30" placeholder="请输入用户名">

size：最大字数

密码 password

<input type="password" size="30" placeholder="请输入密码">

单选按钮 radio

<input type="radio" name = "gender"id = "gender1"> <label for ="gender1">男</label>



            <input type="radio" name = "gender"id = "gender2"> <label for ="gender2">女</label>

            <input type="radio" name = "gender"id = "gender3"> <label for ="gender3">保密</label><br>

lable标签可以点击其中的内容选定按钮；单选框之间必须具备相同的name属性,才能实现多选⼀效果

复选框checkbox

                  <input type="checkbox" name="hobby" id="" value="1">篮球

            <input type="checkbox" name="hobby" id="" value="2">足球

            <input type="checkbox" name="hobby" id="" value="3">羽毛球

            <input type="checkbox" name="hobby" id="" value="4">排球

            <input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>

按钮方法

                    <button>这是button标签，按钮1</button>

                    <input type="button" name="" id="" value="按钮2">

                    <input type="submit" value="按钮3，提交，搭配form标签使用">

下拉标签Subject

            专业：<select name="" id="">

                <option name="Subject" value="1">大数据</option>

                <option name="Subject"value="2"selected>软件工程</option>

                <option name="Subject" value="3">物联网</option>

                <option name="Subject" value="4">人工智能</option>

selected:默认选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
     <form action="test1.html" method="get"><!--action提交给谁，method以什么方式提交（传参） -->
   用户名(文本框) <input type="text" size="30"><br>
   密码（密码框）<input type="password" size="30"><br>
   单选按钮 <input type="radio" name = "gender"id = "gender1" value="1"> <label for ="gender1">男</label>
            <input type="radio" name = "gender"id = "gender2" value="2"> <label for ="gender2">女</label>
            <input type="radio" name = "gender"id = "gender3" value="3"> <label for ="gender3">保密</label><br>
    复选框  <input type="checkbox" name="hobby" id="" value="1">篮球
            <input type="checkbox" name="hobby" id="" value="2">足球
            <input type="checkbox" name="hobby" id="" value="3">羽毛球
            <input type="checkbox" name="hobby" id="" value="4">排球
            <input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>

            <!-- 下拉标签 -->
            专业：<select name="" id="">
                <option name="Subject" value="1" >大数据</option>
                <option name="Subject"value="2"selected>软件工程</option>
                <option name="Subject" value="3">物联网</option>
                <option name="Subject" value="4">人工智能</option><br>
            </select>
            <!-- 文本域 -->
            个人简介：<textarea rows="10" cols="50"></textarea>
            <!-- <button>这是button标签（按钮第一种写法，可以搭配form标签使用）</button>
            <input type="button" name="" id="" value="按钮第二种方法"> --> 
            <input type="submit" value="第三种按钮，提交，搭配form标签使用">
        </form>

        </body>
</html>

下面是打开后的样子：

无语义标签div&span

div 标签,division 的缩写,含义是分割 span标签,含义是跨度。

就是两个盒⼦.⽤于⽹⻚布局。

div是独占⼀⾏的,是⼀个⼤盒⼦，span不独占⼀⾏，是⼀个⼩盒⼦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>一个div</div> 
    <div>一个div</div> 
    <div>一个div</div> 
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
</body>
</html>

列表标签

ul无序列表标签

ul:unorder list

ol有序列表标签

ol：older list

<ul>
        <div>无序列表</div>
        <li>第一列表标签</li>
        <li>第二列表标签</li>
        <li>第三列表标签</li>
        <li>第四列表标签</li>
        <div>有序列表</div>
        <ol>第1列表标签</ol>
        <ol>第2列表标签</ol>
        <ol>第3列表标签</ol>
        <ol>第4列表标签</ol>

    </ul>

实战：创建一个登录页面

由于我们并不需要真的传递给后端，所以在这做个壳子就行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text"  placeholder="请输入用户名">
            </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>
                <input type="text" size="30" placeholder="请输入手机号">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td> 
                <input type="password" size="30" placeholder="请输入密码">
            </td>
        </tr>
    </table>
    <div>
        <button>注册</button><span>已有账号？</span><a href="#">登录</a>
    </div>
    
</body>
</html>