HTML相关知识【黑马程序员前端】

文章目录

  • 一、标题标签
  • 二、段落标签
  • 三、换行标签
  • 四、水平线标签
  • 五、文本格式化标签
  • 六、图片标签
  • 七、音频标签
  • 八、视频标签
  • 九、链接标签
  • 十、列表标签
    • 10.1 无序列表
    • 10.2 有序列表
    • 10.3 自定义列表
  • 十一、表格标签
  • 十二、表单标签
    • 12.1 input 系列标签
    • 12.2 button 系列标签
    • 12.3 select 下拉菜单标签
    • 12.4 textarea 文本域标签
    • 12.5 label 标签
  • 十三、语义化标签
  • 十四、字符实体

一、标题标签

<h1>h1>
<h2>h2>
<h3>h3>
<h4>h4>
<h5>h5>
<h6>h6>

二、段落标签

<p>p>

三、换行标签

<br>

四、水平线标签

<hr>

五、文本格式化标签

<b>加粗b>
<u>下划线u>
<i>倾斜i>
<s>删除线s>


<strong>加粗strong>
<ins>下划线ins>
<em>倾斜em>
<del>删除线del>

六、图片标签

<img src="" alt="">
属性 说明
src 指定需要展示图片的路径
alt 替换文本,当图片加载失败时,才显示的文字
title 提示文本,当鼠标悬停时,才显示的文字
width 图片的宽度
height 图片的高度

七、音频标签

<audio src="" controls>audio>
属性名 功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放

八、视频标签

<video src="" controls>video>
属性名 功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放(谷歌浏览器中需要配合muted实现静音播放)
loop 循环播放

九、链接标签

<a href="">超链接a>
  • target属性
取值 效果
_self 默认值,在当前窗口中跳转(覆盖原网页)
_blank 在新窗口中跳转(保留原网页)
<a href="https://www.baidu.com" target="_blank">百度一下a>

十、列表标签

10.1 无序列表

<ul>
    <li>li>
ul>

10.2 有序列表

<ol>
    <li>li>
ol>

10.3 自定义列表

<dl>
    <dt>主题dt>
    <dd>内容dd>
dl>

十一、表格标签

<table>
    <tr>
    	<td>td>
        <td>td>
    tr>
table>
  • 相关属性
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
  • 表格标题和表头单元格标签
标签名 名称 说明
caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
<table border="1">
    <caption>
        学生成绩单
    caption>
    <tr>
        <th>姓名th>
        <th>成绩th>
        <th>评价th>
    tr>
    <tr>
        <td>张三td>
        <td>100td>
        <td>优秀td>
    tr>
    <tr>
        <td>李四td>
        <td>100td>
        <td>优秀td>
    tr>
table>

HTML相关知识【黑马程序员前端】_第1张图片

  • 表格的结构标签(了解)
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部

HTML相关知识【黑马程序员前端】_第2张图片

  • 合并单元格
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并,将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并,将多列的单元格水平合并

十二、表单标签

12.1 input 系列标签

<input type="text" />
  • type 属性值:
标签名 type属性值 说明
input text 文本框,用于输入单行文本
input password 密码框,用于输入密码
input radio 单元框,用于多选一
input checkbox 多选框,用于多选多
input file 文件选择,用于之后上传文件
input submit 提交按钮,用于提交
input reset 重置按钮,用于重置
input button 普通按钮,默认无功能,之后配合js添加功能
  • 文本框

常用属性

属性名 说明
placeholder 占位符。提示用户输入内容的文本
  • value 属性和 name 属性

value属性:用户输入的内容,提交之后会发送给后端服务器。

name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义

  • 密码框

常用属性

属性名 说明
placeholder 占位符。提示用户输入内容的文本
  • 单选框

常用属性:

属性名 说明
name 分组。有相同 name 属性值的单选框为一组,一组中同时只有一个被选中
checked 默认选中

注意点:

name属性对于单选框有分组功能。

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

  • 复选框
属性名 说明
checked 默认选中
  • 文件选择
属性名 说明
multiple 多文件选择
  • 按钮
标签名 type属性值 说明
input submit 提交按钮。点击之后提交数据给后端服务器
input reset 重置按钮。点击之后恢复表单默认值
input button 普通按钮。默认无功能,之后配合js添加功能

12.2 button 系列标签

<button>
	文字或图片等
button>

属性值:

标签名 type属性值 说明
button submit 提交按钮。点击之后提交数据给后端服务器
button reset 重置按钮。点击之后恢复表单默认值
button button 普通按钮。默认无功能,之后配合js添加功能

12.3 select 下拉菜单标签

<select>
    <option value="">请选择option>
    <option value="">北京option>
    <option value="">上海option>
    <option value="" selected="selected">广州option>
    <option value="">深圳option>
select>

12.4 textarea 文本域标签

常用属性:

属性值 说明
cols 规定了文本域内可见宽度
rows 规定了文本域内可见高度
<textarea cols="6" rows="6">textaretextaretextaretextaretextaretextaretextaretextaretextarea>

HTML相关知识【黑马程序员前端】_第3张图片

12.5 label 标签

  • 场景:常用于绑定内容与表单标签的关系
  • 标签名:label
  • 使用方法:
    HTML相关知识【黑马程序员前端】_第4张图片
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    性别:
    <input type="radio" name="sex" id="nan"> <label for="nan">label>
    <input type="radio" name="sex" id="nv"> <label for="nv">label>
body>
html>

HTML相关知识【黑马程序员前端】_第5张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    性别:
    <label><input type="radio" name="sex">label>
    <label><input type="radio" name="sex">label>
body>
html>

十三、语义化标签

HTML相关知识【黑马程序员前端】_第6张图片

十四、字符实体

HTML相关知识【黑马程序员前端】_第7张图片


本文参考及图片来源:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程


你可能感兴趣的:(前端,html,javascript)