HTML标签与属性

你的名字867
130 阅读2分钟

HTML标签与属性

Hyper Text Markup Language， 超文本标记语言。 是一种用于创建网页的标准标记语言。

0.HTML骨架

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>

image.png

1.文字类标签

     <h1>h1一级标题</h1>
     <h2>h2二级标题</h2>
     <h3>h3三级标题</h3>
     <h4>h4四级标题</h4>
     <h5>h5五级标题</h5>
     <h6>h6六级标题</h6>
     <p>p段落1,段落段落段落段落段落段落</p>
     <hr>hr
     <p>p段落2,段落段落段落段落段落段落</p>
     <p>p段落3，段落<br>br换行段落段落</p>
 ​
 ​
     文本格式化标签<b>b或strong加粗</b><u>u或ins下划线</u><i>i或em倾斜</i><s>s或del删除线</s>
 ​

image.png

2.图片标签

 <img 
     src="图片路径" 
     alt="图片加载失败时的替换文本" 
     title="鼠标悬停时的文本" 
     width="设置宽度，设置高宽中的一个按比例缩放" 
     height=""
 >

3.音频标签

 <!--支持MP3、wav、ogg-->
 <audio
        src="音频路径"
        controls="使用默认的播放控件"
        autoplay="自动播放，大多数不支持"
        loop="循环播放"
        >
 </audio>

4.视频标签

 <!--支持MP4、WebM、ogg-->
 <video 
        src="视频路径"
        controls="使用默认的播放控件"
        autoplay="自动播放，大多数不支持（谷歌浏览器中配合muted实现静音播放）"
        loop="循环播放"
        width="300px"
        height=""
        >
 </video>

5.链接标签

 <a 
    href="目标网页.html 或 网站地址"
    target="目标网页的打开形式：
            _self 默认值，在当前窗口中跳转
            _blank 在新窗口跳转"
    >
    链接文字
 </a>
 ​
 锚链接
 <a href="#name1" >跳转到name属性为name1的链接处</a>
 <a name="name1"> </a>
 ​

6.列表标签

 无序列表
 <ul>
     <li>列表项1</li>
     <li>列表项2</li>
     <li>列表项3</li>
     <li>列表项4</li>
 </ul>
 ​
 有序列表
 <ol>
     <li>列表项1</li>
     <li>列表项2</li>
     <li>列表项3</li>
     <li>列表项4</li>
 </ol>
 ​
 自定义列表
 <dl>
     <dt>自定义列表的主题</dt>
     <dd>内容1</dd>
     <dd>内容2</dd>
     <dd>内容3</dd>
 </dl>
 ​

7.表格标签

 <table
        border="边框宽度"
        width="表格宽度"
        height="表格高度"
        >
     <caption>表格大标题</caption>
     <tr>
         <th>表头1</th><th>表头2</th>
     </tr>
     <tr>
         <td
             rowspan="合并单元格的个数"
             colspan="合并单元格的个数"
             >内容1</td>   
         <td>内容1</td>
         <td>内容1</td>
     </tr>
     <tr>
         <td>内容1</td>
     </tr>
     <tr>
         <td>trtd内容2</td>
         <td>td内容2</td>
         <td rowspan="">td内容2</td>
     </tr>
     
 </table>
 ​
 ​
 表格结构标签，包裹tr标签
 <thead>表格头部</thead>
 <tbody>表格主体</tbody>
 <tfoot>表格底部</tfoot>
 ​
 ​

8.表单标签

<form>
    input:
    文本框
        <input type="text" 
               placeholder="框内的提示信息">
    密码框
        <input type="password"
               placeholder="框内的提示信息">
    单选框
        <input type="radio" 
               name="相同name的radio为一组，一组中只要一个被选中"
               checked="默认选中">
    多选框
        <input type="checkbox">
    文件上传
        <input type="file"
               multiple="多文件选择">
    提交按钮
        <input type="submit">
    重置按钮
        <input type="reset">
    普通按钮，配合js产生操作
        <input type="button">
    下拉菜单
    <select>
        <option
        	selected="默认选中"
            >下拉菜单1</option>
        <option>下拉菜单2</option>
        <option>下拉菜单3</option>
    </select>
    文本域，输入多行文本
    <textarea
              cols="文本域可见的列数"
              rows="文本域可见的行数">
    </textarea>
    
    label标签与表单标签进行绑定
    1.
    <label for="与input标签的id相同进行绑定">内容</label>
    <input type="text" id="">
    
    2.
    <label>
        内容
    	<input type="text">
    </label>
    



    </form>

9.字符实体

空格合并现象：多个空格只识别为一个空格

空格使用&nbsp;来代替。

其他字符实体不常用。

avatar
文章
阅读
粉丝