小白WEB前端学习(二)

续:小白WEB前端学习(一)

HTML这篇写完就结束了

6.HTML音频标签

例如: <audio src="./aa.mp3" controls ></audio>

属性描述
autoplayautoplay规定音频将在准备就绪后立即开始播放。
controlscontrols规定应显示音频控件(例如播放/暂停按钮等)。
looploop规定音频将在每次结束后重新开始。
mutedmuted规定音频输出应静音。
preloadautometadatanone规定是否以及如何在页面加载时加载音频。
srcURL规定音频文件的 URL。

7.HTML视频标签

例如: <video src="./bb1.mp4" controls ></video>

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性,视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadautometadatanone如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

在浏览器中想要自动播放必须要有Muted属性

!实体字符

字符实体是一种将特殊字符表示为字符代码的方法。使用字符实体有几个优点:

  1. 跨浏览器兼容性:字符实体可以确保在不同的浏览器和平台上都能正确显示特殊字符。在某些情况下,直接使用字符可能导致显示问题。

  2. 可读性和维护性:字符实体更易于阅读和维护,特别是对于不熟悉特殊字符代码的人来说。

实体名称对大小写敏感!

显示结果描述实体名称实体编号
空格&#160;
<小于号&#60;
>大于号&#62;
&和号&#38;
"引号&#34;
'撇号(IE不支持)&#39;
¥元(yen)&#165;
©版权(copyright)&#169;
®注册商标&#174;
商标&#8482;
×乘号&#215;
÷除号&#247;

!HTML5规定

H5是超文本语言HTML的第五次修订,2014年10月由万维网联盟(W3C)完成标准制定,是近几年来Web标准巨大的飞跃。

以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台。和以前版本不同的是,HTML5并非仅仅用来表示Web内容,在这个平台上还能非常方便的加入视频、音频、图象、动画,以及同电脑的交互。

HTML5的意义在于它带来了一个无缝的网络,无论是PC、平板电脑,还是智能手机都能很方便的浏览基于HTML5的各类网站。

新增标签:

figure:用于对元素进行组合。多用于图片与图片描述组合 PS:效果靠的很近

<figure>

<figcaption>xihuanni</figcaption>

</figure>

details:用于描述文档或文档的某个部分的细节,类似于下拉列表

<details>

<section>我的介绍</section>

<p>喜欢你</p>

</details>

总理小结

区别:单标签用于没有内容的元素,双标签用于有内容的元素

扩展知识:网页制作思路:从上到下,先整体再布局

2.嵌套关系的标签

1.HTML列表:

扩展:内容整齐的区域可以用列表,内容分格子使用表格,用户输入内容的地方用表单,都属于嵌套关系,

1.列表分类:

无线列表,有序列表,自定义列表

2.列表的案例:
1.无序列表:
例如:<ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
     </ul>

注意事项:

一个ul里可以放多个li,li标签特点独占一行,li标签里面可以包裹任何内容

2.有序列表:
例如:<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
     </ol>

type属性

<ol>的属性type 拥有的选项

  1. 1 表示列表项目用数字标号(1,2,3...)

  2. a 表示列表项目用小写字母标号(a,b,c...)

  3. A 表示列表项目用大写字母标号(A,B,C...)

  4. i 表示列表项目用小写罗马数字标号(i,ii,iii...)

  5. I 表示列表项目用大写罗马数字标号(I,II,III...)

3.自定义列表:
例如:<dl>
        <dt>列表标题</dt>
        <dd>列表描述/详情</dd>
     </dl>

注意事项:

dl里面只能包含dt和dd,dl和dd里面可以放任何内容,不是一组相同内容

ul ol dl分别在什么情况下用?
有序列表在列表项目对顺序有要求的时候使用;
无序列表在列表项目对顺序没要求时使用,可以是任何一系列项目;
定义列表在对项目有描述要求时使用。

2.HTML表格:

<table>表格</table>//表格根标签 ,表格内容从左到右依次排列

table hesader 表格头部

table row表格行

table data表格数据

border 边框

1.注意事项:

表格默认是不带边框线的,可以利用 CSS 中的 border属性来设置表格的边框。border-collapse 是“边框塌陷”的意思,当属性值为 collapse 时,可以使表格的双边框变为单边框。

2.表格的案例:
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

3.合并单元格:

可以合并竖着的也可以是横着的

合并的步骤:

1.明确合并的目标

2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

​ --跨行合并,保留最上单元格,添加属性rowspan

​ --跨列合并,保留最左单元格,添加属性colspan

3.删除其他单元格

实操:
<table border="1" width="300px" height="300px" align="center">
    <tr>
      <th colspan="2"></th>
      <th rowspan="2"></th>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"></td>
    </tr>
  </table>

结果:

表格属性:
<table>表格属性
border:设置表格的边框
width:设置表格的宽度
height:设置表格的高度
align:设置表格的水平对齐方式
cellpadding:设置内容距离边框的距离
cellspacing:设置单元格之间的距离
bgcolor:设置表格背景颜色
bordercolor:设置边框颜色
background:设置背景图片

3.HTML表单

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮

使用场景:登录页面,注册页面,搜索区域

<form action="url" method="get|post" name="myform"> </form>

属性说明

<form> (表单)元素用于创建表单,所有表单控件所有元素都放在这里。在form表单里添加控件才能填写内容,action里面填写URL ,设置要将表单提交到何处(默认为当前页面)

input元素

HTML <input> 元素是最重要的表单元素。

<input> 元素有很多形态,根据不同的 type 属性,value显示给用户的值,name自己命名给自己的值

类型描述
<input type="text">单行文本,输入什么就显示什么
<input type="password">单行文本密码字段字符不会明文显示,而是以星号或圆点替代
<input type="radio">定义单选按钮输入(选择多个选择之一)
<input type="checkbox">复选按钮
<input type="button">显示可单击的按钮
<input type="submit">显示提交按钮(用于提交表单)
<input type="file">变成按钮的样式,用于上传文件
<input type="reset">定义充值按钮,所有表单值为默认值
<input type="image" src="a.jpg" />用于创建图形化的提交按钮,即采用图像而非文本形式的提交按钮
<input type="email">(HTML5新增)定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证)
<input type="url">(HTML5新增)定义用于输入 URL 的字段
<input type="search">(HTML5新增)定义搜索字段(比如站内搜索或谷歌搜索等)PS:有X的效果
<input type="color">(HTML5新增)从拾色器中选取颜色,例如:xxxxxxxxxx
<input type="number" min="1" max="5">(HTML5新增)定义用于输入数字的字段(可以设置可接受数字的限制)
<input type="date">(HTML5新增)定义 date 控件

1.input占位文本:placeholder-"提示信息":在代码标签里面写,在浏览器里显示灰色

2.type="radio"单选框radio没有完全的单选功能,靠写多个相同name值,进行实现一组单选

3.check属性是对选择的进行默认选择

4.type="file"如果想要多个文件一起上传,multiple进行多选的属性

Select元素

select下拉菜单:嵌套:<select> <option>.........</option></select>可以有多个option

Textarea元素

多行文本框<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。

可以通过 colsrows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSSheightwidth 属性

PS:像input就是单行的

<textarea name="" id=""></textarea>

label元素

用label标签绑定文字和表单控件的关系,增大表单控件的点击范围(焦点)

label标签增大点击范围表单控件:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域等等

​ <label>所选专业:<input type="text"></label>//当处于父子关系时候,可以忽略for和Id也可以实现增大点击范围的功能,若果0想让并列关系的两个元素绑定,就写for和id

button元素
  • submit: 提交按钮,点击后可以提交数据到后台

  • reset: 重置按钮,点击后将表单中的所有字段重置为它们的初始值。

  • button: 普通按钮,默认没有功能,一般配合JavaScript使用,默认值是"button"。

新增属性(HTML5):
  • autofocus 属性规定在页面加载时,域自动地获得焦点。

  • placeholder属性提供一种提示(hint),描述输入域所期待的值

  • required属性规定必须在提交之前填写输入域(不能为空) //oninvalid="setCustomValidity('不能为空')"可以修改,required默认文字

实操:
思路:表格里面嵌套表单 
<table border="1" align="center" cellspacing="0" width="500" height="300"> 
    <tr align="center">
      <td colspan="4">专业换选</td>
    </tr>
    <tr>
      <td>搜索类型:</td>
      <td>
        <form>
          <select>
            <option value="title">选择院系:</option>
            <option value="dianqi">电气工程</option>
            <option value="jisuanji">计算机工程</option>
            <option value="waiguoyu">外国语学院</option>
          </select>
        </form>
      </td>
      <td>学生身份:</td>
      <td>
        <form>
          <select>
            <option value="title">学生年级:</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </form>
      </td>
    </tr>
    <tr>
      <td>所在地区:</td>
      <td>
        <form>
          <select>
            <option value="title">不限</option>
            <option value="jaingsu">江苏</option>
            <option value="liaoning">辽宁</option>
            <option value="shanxi">陕西</option>
            <option value="guangdong">广东</option>
            <option value="chongqing">重庆</option>
          </select>
        </form>
      </td>
      <td>性别</td>
      <td>
        <form>
          <input type="radio" name="sex" value="nan">男
          <br>
          <input type="radio" name="sex" value="nv">女
        </form>
      </td>
    </tr>
    <tr>
      <td>
        学习科目:
      </td>
      <td colspan="3">
        <select>
          <option value="title">请在下列列表选择:</option>
          <option value="java">java</option>
          <option value="python">python</option>
          <option value="c++">c++</option>
          <option value="lua语言">lua语言</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>学习</td>
      <td colspan="3">
        <form>
          <input type="text" placeholder="请输入要学习的内容">
        </form>
      </td>
    </tr>
    <tr>
      <td>专业</td>
      <td colspan="3">
        <form>
          <input type="search" placeholder="请输入要学习的内容">
          <input type="submit" value="搜索">
        </form>
      </td>
    </tr>
  </table>

结果:

3.元素和属性:

元素(Elements)

  1. 定义:HTML元素指的是HTML标签,包括开始标签、内容和结束标签。

    例如,<p style="background-color: aqua;">aa</p>,<p>是开始标签,</p>是结束标签,它们之间的内容(aa)是元素的文本内容。p是元素,而<p>和</p>是标签,

  1. 作用:元素用于定义网页的结构和内容。HTML元素可以包含文本、图片、链接、列表、表格、表单等。

  2. 嵌套:HTML元素可以嵌套在其他元素内部,形成复杂的文档结构。

  3. 语法:元素使用尖括号<>包围,开始标签和结束标签之间可以包含文本内容或其他元素。

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

<html> 元素定义了整个 HTML 文档。

<h2 style="background-color:red;">这是一个标题</h2>    //html元素

1.☀HTML <div> 元素(盒子装代码的):

是块级元素,块级元素最主要的特点是它们自己独占一行,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。由于它属于块级元素,当与 CSS 一同使用时,<div> 元素可用于对大的内容块设置样式属性。

2.☀HTML <span> 元素(盒子装代码的):

是内联元素,可用作文本的容器,不换行

<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

属性(Attributes)

  1. 定义:属性是添加到HTML元素中的额外信息,它总是出现在开始标签中,并且总是以名称/值对的形式出现,比如:color="red"

  2. 作用:属性为HTML元素提供有关元素的额外信息,这些信息不会被显示在网页上,但可以被浏览器或其他软件解析和使用。例如,<img src="image.jpg" alt="一张图片">中,srcalt就是属性,它们分别提供了图片的来源和替代文本。

  3. 语法:属性总是写在开始标签中,位于元素名称后面。属性名称和值之间用等号=连接,属性值用引号(单引号或双引号)包围。

  4. 常见属性:HTML元素有很多常见的属性,如class(用于CSS样式)、id(用于唯一标识元素)、href(用于链接或引用资源)、style(用于样式)等。

HTML 标签中有一些通用的属性,如 id、class、style 等,学到css用到属性的值

HTML 元素可以设置属性属性名称不区分大小写,属性值区分大小写

1.属性的介绍

基本语法:<开始标签 属性名="属性值"></结束标签>每个HTML元素可以具有不同的属性例:<p id="describe” class="section">这是一个段落标签</p> //id,class为属性属性名称不区分大小写,属性值对大小写敏感,双引号引起来一个属性值

HTML基本属性js尽量操作id,css尽量操作class!
class为html元素定义一个或多个类名(classname)方便设置样式
id定义元素的唯一id
style规定元素的行内样式(inline style)

总结小结

  • 元素是HTML文档的基本构建块,用于定义网页的结构和内容。

  • 属性为HTML元素提供额外的信息,这些信息不会显示在网页上,但可以被浏览器或其他软件解析和使用。

简单来说,可以把HTML元素看作是一个容器或盒子,而属性则是这个容器或盒子的标签或描述。

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值