前端 - html基础总结 - 《运维大世界》

date: 2021-09-21title: html基础总结 #标题
tags: html #标签
categories: 前端 # 分类

date: 2021-09-21title: html基础总结 #标题
tags: html #标签
categories: 前端 # 分类

整理并记录下html基础标签功能。

html标签分为两类：

内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签，内敛标签有：b\i\u\s\button\span\img\a……
块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签，块级标签有： \h1-h6\br\hr\p\div….
p标签:不能嵌套p标签,也不能嵌套块级标签

body标签中的基本标签

<button>我是个按钮</button>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线\分割线-->
<hr>

特殊符号

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;

img标签（图片标签）

<!-- 图片标签
属性 src='图片路径' ，图片路径可以为网络地址的绝对路径或者本地相对路径。
示例: -->
    <img src="https://www.wanmeizy.com/uploads/ueditor/upload/image/20190615/156052992626137504.jpg" alt="这是个美女,请稍等.." title="网络美女" width="200" height="200">
</br>
<img src="a.jpg" alt="这是个美女,请稍等.." title="本地美女" width="200" height="200">

a标签（超链接标签）

基础语法

<!--
属性:
href:超链接的地址
target:是否新建窗口
target="_self"  当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
download=filename：设置下载的文件名
示例:
-->
    <a href="https://www.baidu.com" target="_blank">百度</a>

设置下载文件

<!--如果是非文本文件，可以不设置download属性-->
<a href="john-1.8.0.tar.gz" title="john-1.8.0.tar.gz">john-1.8.0.tar.gz</a>
<p></p>
<!--如果是文本文件，需要设置download属性，download用于定义下载的文件名-->
<a href="python中协程的概念及使用.md" title="python中协程的概念及使用.md" download="python中协程的概念及使用.md">python中协程的概念及使用.md</a>

跳转到页面中某个地方

<a id="top"></a>
<p>
<a href="#C17">查看章节 17</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 4</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 17</a></h2>
<p>这边显示该章节的内容……</p>

<p>
<a href="#top">返回顶部</a>
</p>

列表标签

列表标签中的type属性是设置列表的排序样式。

无序列表

无序列表中的type属性值可以是：

disc：实心圆点，默认值
circle：空心圆圈
square：实心方块
none：无样式

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

有序列表

有序列表中的type属性值可以是：

1：数字列表，默认值
A：大写字母
a：小写字母
Ⅰ：大写罗马
i：小写罗马

start属性是指定序号从第几个开始。

    <ol type="a" start="2">    <!--以a、b、c、d.....进行排序，从第二个字母开始-->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ol>

table（表格）

<!--
cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离
border:边框宽度
-->
<table border="1" cellpadding="1" cellspacing="2">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>40</td>
        <td>打篮球</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>18</td>
        <td>抽烟喝酒烫头</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>18</td>
        <td>打羽毛球</td>
    </tr>
    </tbody>
</table>

input（输入标签）

input标签:

type属性：控制输入框的样式的
name属性：分组,携带数据的key，如：key:value
value：选择框提交数据的时的值,输入框的默认值
placeholder：设置input输入框中的提示信息，当输入信息后，提示信息自动消失
checked：默认选中
readonly ：只读，针对的是输入框

下面是input中支持的type属性值。

input标签中type属性的值:

text：单行输入文本
password：密码输入框（不显示明文）
date：日期输入框
checkbox：复选框 [x]
radio：单选框
submit：提交按钮 #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset：重置按钮 #页面不会刷新，将所有输入的内容清空
button：普通按钮
hidden：隐藏输入框
file：文本选择框 # 选择要上传的文件

<!--value属性用于设置默认值-->
    用户名:<input type="text" name="username" value="dazhuang">
    密码:<input type="password" name="password" value="111">

<!--checked属性使用示例（ 最后一个是简写方式,当属性名和属性值相同时可简写）-->    
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
     <input type="checkbox" name="hobby" value="c" checked="checked"> 烫头
     <input type="radio" name="sex" value="2" checked>女

form（表单标签）

由于涉及到表单提交数据，所以这里写了一个简单的server端代码，需要先运行下面的python代码，以便表单提交数据到服务端，代码如下：

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8001))
server.listen()
while 1:
    conn, addr = server.accept()

    from_browser_msg = conn.recv(1024).decode('utf-8')
    print(from_browser_msg)

    conn.send(b'HTTP/1.1  200 ok\r\n\r\n')
    with open('h1.html', 'rb') as f:
        data = f.read()

    conn.send(data)

    conn.close()


# 同级目录下还有个html页面，用于返回给客户端注册成功的页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<body>
<h5>注册成功</h5>
</body>
</html>

form表单代码如下：

<form action="http://127.0.0.1:8001">

    用户名:<input type="text" name="username" placeholder="请输入用户名">
    密码:<input type="password" name="password" value="111">

    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2">女

    <input type="checkbox" name="hobby" value="a"> 喝酒
    <input type="checkbox" name="hobby" value="b"> 抽烟
    <input type="checkbox" name="hobby" value="c"> 烫头
    <input type="submit">
    <hr>
    <input type="date">
    <input type="button" value="普通按钮">
    <input type="reset">
    <input type="hidden">
    <input type="file">
</form>

现在来对上面的html进行分析：

<form action="http://127.0.0.1:8001">       <!--action：指定表单数据的提交地址-->

    <!--    输入用户名和密码，默认密码为：111-->
    用户名:<input type="text" name="username" placeholder="请输入用户名">
    密码:<input type="password" name="password" value="111">

    <!--
            设置单端按钮，要么是男，要么是女，单选按钮和复选按钮，必须设置name属性，
            如下，如果选择男，则会提交：sex=1，如果选择女，则会提交sex=2
            -->
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2">女

    <!--
    设置复选框，name一致，则表示为一组，如果选中喝酒，则会提交value=a，
    如果三个同时选中，则会提交value=a&value=b&value=c
    -->
    <input type="checkbox" name="hobby" value="a"> 喝酒
    <input type="checkbox" name="hobby" value="b"> 抽烟
    <input type="checkbox" name="hobby" value="c"> 烫头
    <input type="submit">           <!--提交按钮，提交上述数据-->
    <hr>
    <input type="date">                 <!--日期输入框-->
    <input type="button" value="普通按钮">
    <input type="reset">           <!--重置按钮-->
    <input type="hidden">         <!--隐藏的按钮-->
    <input type="file">         <!--文件选择按钮-->
</form>
<!--
    input和button都是form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
        <input type="submit">
        <button>提交按钮</button>
        -->

select（下拉选择框）

selected属性表示下拉框默认选中的选项。

    <select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>

select下拉选择框，有单选和多选两种，一般下拉选择框都是单选，基本没有多选，如果要设置为多选，只需要给select增加multiple属性即可。如下：

    <select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label（标识标签功能）

label标签用于标识标签功能，如下，input是输入用户名的：

<!--
写法一：for:执行对哪个标签进行标识，for指定的是input中的id属性值
效果：点击label标签中的文字,就能让标识的标签获得光标
-->
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">


写法二：
        <label>
            密码:<input type="password" name="password" value="111" >
        </label>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10" >
  默认内容
</textarea>


或者：

<textarea name="memo" id="memo" cols="30" rows="10" placeholder="请输入你的评论">
</textarea>

<!--
textarea中有如下属性：
name：名称
rows：行数  #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
placeholder：提示信息
disabled：禁用

-->

html基础总结

date: 2021-09-21title: html基础总结 #标题tags: html #标签categories: 前端 # 分类