HTML基础标签

展示用户信息

span标签 文本标签

<span style="color:red;font-size:30px">demo</span>

<span>hello</span>

效果展示：

h1-h6,标题标签

<h1>标题标签</h1>

<h2>标题标签</h2>

<h3>标题标签</h3>

<h4>标题标签</h4>

<h5>标题标签</h5>

<h6>标题标签</h6>

效果展示：

div竖着布局的标签

<div>竖着布局的标签</div>

<div>竖着布局的标签</div>

<div>竖着布局的标签</div>

效果展示：

p段落标签

<p>段落标签</p>

<p>段落标签</p>

<p>段落标签</p>

效果展示：

id（相当于身份证号） class（另一个维度上的划分） style 所有标签都有的属性 target 资源打开窗口的方式

 a超链接标签 href 设置资源路径

<a href="https://y.qq.com/n/ryqq/mv_toplist" target="_self">点击跳转（本窗口打开）</a>

<a href="https://y.qq.com/n/ryqq/mv_toplist" target="_blank">点击跳转（新窗口打开）</a>

<a href="https://y.qq.com/n/ryqq/mv_toplist" target="xyz">点击跳转（嵌入的iframe的窗口xyz打开）</a>

a 锚点标签

<br></br>(换行)

<a name="yy">定义锚点</a>

<a href="#yy">跳转锚点</a>

img 图片标签

src表示引用图片资源 当图片无法正常加载时就会显示出alt中的文字内容

相对路径 访问者与被访问者之间的关系

1.兄弟关系 直接通过文件名访问src="图片.jpg"

2.叔侄关系src="img/图片.jpg

3.表兄弟关系 ../img/图片.jpg" ..表示返回上一级

绝对路径 被访问的资源在磁盘中的绝对位置

当width/height只设置一个时，照片会按照设置的数值进行另外一个数值的等比例调整

        <img src="图片.jpg" alt="草原图片" width="200px" height="20px">

效果展示：

列表标签

无序列表

        <ul>

            <li>列表标签</li>

            <li>列表标签</li>

            <li>列表标签</li>

            <li>列表标签</li>

            <li>列表标签</li>

        </ul>

效果展示：

有序列表

type属性设置序号的类型 start属性设置从哪开始编写(数字)

        <ol type="A" start="2">

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

        </ol>

效果展示：

表格标签

table表示放表格的容器

tr 表示一行

td表示一个单元格  th单元格（字体加粗居中）

border="1" 表示有边框

cellpadding 表示单元格的填充度

cellspacing="0" 单元格之间的间距

thead/tfoot/tbody

rowspan 行合并

colspan 列合并

        <table border="1" cellpadding="20px" cellspacing="5">

            <tfoot>

                <tr>

                    <th colspan="2">id</th>

                    <!-- <th>name</th> -->

                    <td>sex</td>

                    <td>year</td>

                </tr>

            </tfoot>

            <tr>

                <td>1</td>

                <td>zhang</td>

                <td>male</td>

                <td>18</td>

            </tr>

            <thead>

                <tr>

                <td>2</td>

                <td>li</td>

                <td>female</td>

                <td>20</td>

            </tr>

            </thead>

            <tr>

                <td>3</td>

                <td>wang</td>

                <td>femal</td>

                <td>19</td>

            </tr>

        </table>

效果展示：

iframe 窗口标签，框架标签

主要作用：嵌套其他页面

src 嵌入的资源

width 宽

height 高

frameborder="5" 边框，当数值为0时，去掉边框让页面嵌入的更融合

name 窗口名称 点击跳转xxx,会在此框中出现链接页面

        <a href="https://www.processon.com/history" target="xyz">跳转ProcessOn</a>

        <a href="https://www.bilibili.com/" target="xyz">跳转哔哩哔哩</a>

        <iframe src="https://y.qq.com/n/ryqq/mv_toplist" frameborder="5" width="800px" height="600px" name="xyz"></iframe>

效果展示：

audio音频标签

controls手动播放,让播放器显示出来

autoplay自动播放,不显示播放器

loop循环播放

<audio src="" controls></audio>

效果展示：

video视频标签

controls 手动播放,让播放器显示出来

autoplay自动播放

loop循环播放

Width height

<video src="" controls></video>

效果展示：

收集用户信息

<form>

单行文本框

        <input type="text"><br><br>

效果展示：

密码框

        <input type="password"><br><br>

效果展示：

 单选框

name属性值相同会视为一组,一组内的只允许单选

        <input type="radio" name="sex">男<input type="radio" name="sex">女 <br><br>

效果展示：

复选框

        <input type="checkbox">足球<input type="checkbox">篮球<input type="checkbox">羽毛球
<br><br>

效果展示：

文件选择器

        <input type="file"><br><br>

效果展示：

颜色选择器

        <input type="color"><br><br>

效果展示：

日期选择器

        <input type="date"><br><br>

效果展示：

日期时间选择器

        <input type="datetime-local"><br><br>

效果展示：

周选择器

        <input type="week"><br><br>

效果展示：

滑块

        <input type="range" min="0" max="100" value="10"><br><br>

其中value定义滑块的初始值

效果展示：

数字

        <input type="number" min="0" max="50" value="20" step="5"><br><br>

效果展示：

下拉框

step位数字增长数量，其中value定义滑块的初始值

        <select name="" id="">

            <option>数学</option>

            <option>语文</option>

            <option value="">英语</option>

        </select><br><br>

效果展示：

多行文本域

        <textarea rows="10" cols="50"></textarea><br><br>

rows属性指定了文本输入框的行数，即文本框的高度

cols属性指定了文本输入框的列数，即文本框的宽度

效果展示：

按钮

        <input type="button">普通按钮

        <input type="reset">重置按钮

        <input type="submit">提交按钮

效果展示：

    </form>

form内的输入框才受到按钮的控制