html简介

✿小奶兔✿

已于 2024-07-02 11:22:41 修改

阅读量273

点赞数 4

文章标签： html 前端 javascript

于 2024-07-02 10:12:06 首次发布

本文链接：https://blog.csdn.net/Zhao13155/article/details/140108918

版权

HTML骨架结构

<html>
  <head>
    <title>标题</title>
  <body>
        文本内容
  </body>
</html>

html标签:网页的整体

head标签:网页头部

body标签:网页的身体

title标签:网页的标题

标题标签

 <h1>h.标签从h1~h6</h1>
    <h2>重要程度依次递减</h2>
    <h3>每个h标签独占一行</h3>
    <h4>h标签比普通文字，加粗</h4>
    <h5>一般用标题中</h5>
    <h6>h1标签需要慎重使用</h6>

段落标签

p标签:段落之间存在间隙,独占一行

换行标签

br:单标签,让文字强制换行

水平线标签

hr:在页面显示一条水平线

<b>加粗</b>
<strong>加粗</strong><br>
<u>下划线</u><ins>下划线</ins><br>
    <s>删除线</s><del>删除线</del><br>
    <hr>
    <b><i>加粗倾斜</i></b>  
    <hr>
    <sup>3</sup> 上标<br>
    法外狂徒张三<sub>①</sub>  下标

图片标签

<img src="" alt="">

img标签:需要展示对应的效果，需要借助标签的属性进行设置！

img标签 + src属性 + alt属性 + title属性 + width属性 + height属性

路径:src

相对路径：同级目录 + 下级目录 + 上级目录

音频标签

audio标签

音频标签有哪些常见属性:

src：音频路径

controls:音频控件

autoplay：自动播放

loop：循环播放

视频标签

video标签

视频标签有哪些常见属性:

src：视频路径

controls：视频控件

autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放

loop：循环播放

超链接标签

<a herf="./目标网页.html">超链接</a>

a标签;也可以称呼超链接、锚链接

列表标签

有序标签
   <ul>
       <li>小米</li>
       <li>华为</li>
       <li>苹果</li>
    </ul>
无序标签
   <ol>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
   </ol>
自定义标签
   <dl><dt>华为:</dt>
        <dd>p30</dd>
        <dd>p40</dd>
        <dd>p50</dd>
        <dt>苹果:</dt>
        <dd>11</dd>
        <dd>12</dd>
        <dd>15</dd>
   </dl>

有序标签:ul

无序标签:ol

自定义标签:dd dt dl

表标基本标签

table标签:表格整体

tr标签:表格每行

td标签:表格单元格,对于主题的每一项内容

<table>
   <tr>
     <td></td>
   </tr>
</table>

表格属性

border:边框宽度

width:表格整体宽度

height:表格整体高度

<table border="2" hight="30px"  width="10px">
    <tr>
      <td ></td>
    </tr>
</table>

表格整体大标题

caption标签:表格整体打标题

<table border="1" height="80px" width="30px">
   <caption><h2>简介</h2></caption>
      <tr>
        <td height="20px"></td>
        <td height="20px"></td> 
        <td height="20px"></td>
        <td height="20px"></td>
       </tr>
       <tr>
        <td height="20px"></td>
        <td height="20px"></td> 
        <td height="20px"></td>
        <td height="20px"></td>
       </tr>
</table>

合并单元格

<table border="2" hight="300px"  width="100px">
    <tr>
       <td rowspan="2"></td>
       <td ></td>
       <td ></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td ></td>
        <td ></td>
    </tr>
    <tr>  
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

rowspan:跨行合并,将多个单元格垂直合并

colspan:跨列合并,将多个单元格水平合并

表单标签

form:表单标签

action:数据提交的位置/处理数据的程序
method: 数据提交方式
get: url可见(地址栏可见) 不安全有大小限制
post:相反

input标签

属性:type

type属性值

text:文本框,用于输入单行文本

password:密码框,用于输入密码

radio:单选框,用于多选一

checkbox:多选框,用于多选多

file:文件选择,用于之后上传文件

submit:提交按钮

rese:重置按钮

button:普通按钮

name:分组,有相同name属性的单选框为一组,一组中同时只能有一个被选中

checked:默认选中

multiple:多文件选择

多行文本:textarea

属性

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

下拉列表标签

<select name="sc" >
            <optgroup  label="华为">
                <option >p30</option>
                <option >P40</option>
                <option >p50</option>
                <option >p60</option>
            </optgroup>
            <optgroup label="小米">
                <option >小米6</option>
                <option >小米12</option>
                <option >小米13</option>
                <option >小米14</option>
            </optgroup>
        </select>

select标签：下拉列表的整体

option标签：下拉列表的每一项

属性： selected：下拉列表的默认选中

select 默认选中

placeholder 输入提示

语义化标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

语义布局标签

header：网页头部

nav：网页导航

footer：网页底部