HTML

一、标签

认识标记

<!DOCTYPE html>: 文档声明, 声明的是 HTML5
<html></html>: html 标签
<head></head>: 头部标签
<title></title>: 标题标签
<body></body>: 内容标签
<p></p>: 段落
<span></span>: 文本标签（行级标签）
<i></i>：倾斜
<b></b>：加粗
<strong></strong>：很重要因此加粗
<em></em>：表强调
<address></address>: 地址标签
<small></small>: 小标签
<sub></sub>: 底数
<sup></sup>: 次数
<pre></pre>: 预处理标签
<del></del>: 删除标签
<hr>: 水平线

属性

lang="zh-cn": en/zh-cn (英文/简体中文)

图片标签

<img src="./image/banner.jpg.crdownload" alt="图片加载中" title="这是一张美丽的风景" width="300" height="200">

src="图片路径"

相对路径: 根据当前目录选择
- ./：当前根目录
- ../: 返回到上级根目录
绝对路径:完整路径 (C:\Users\Lenovo\Desktop\成大 web 应用计本 34 班\web_day 1\image)

alt="图片加载中"：当图片路径错误时候提示信息
title：当鼠标悬浮上去提示信息
width="300"：宽度
height="200"：高度

超链接标签 (a 标签)

href="./web_demo 2.html"：链接地址 (相对路径)
target 属性:

_blank：在一个新的浏览器窗口或标签页中打开页面或文件
_self：在当前浏览器窗口打开页面或文件
_parent ：在框架的父级打开页面或文件
_top：在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）

锚标记:

<div id="top">顶部</div>
<a href="#top">回到顶部</a>
需要返回的位置设置 id, href 的时候，#id

列表标签

无序列表 <ul> 和“有序列表 <ol>，特殊的列表叫做“定义列表 <dl>

无序列表

type 属性设置：

disc：项目符号以实心圆“●”表示，默认值。
circle：项目符号以空心圆“○”表示。
square：项目符号以实心方块“■”表示

有序列表

type 属性值：

1，默认，以阿拉伯数字作为列表符号
A，以大写英文字母作为列表符号
a，以小写英文字母作为列表符号
I，以大写罗马数字作为列表符号
i，以小写罗马数字作为列表符号

自定义列表

<dl>
  <dt>HTML</dt>
  <dd>创建 Web 页面的基本 DOM 结构</dd>
  <dt>CSS</dt>
  <dd>为 Web 页面美化元素样式，调整布局</dd>
  <dt>JavaScript</dt>
  <dd>让 Web 页面“动态”起来</dd>
</dl>

二、表格

<table border="1">
    <caption>表格标题</caption>
    <thead> -----> 定义表格的头部部分，通常包含列标题
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody> --------> 表格内容
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

属性

border：表格边框
cellspacing：用于设置表格单元格之间的空间或间隙，默认单位为像素（px）。
cellpadding：用于设置表格单元格与内容之间的间距，默认单位为像素（px）。
width：用于设置表格宽度
height：用于设置表格高度
bgcolor：用于设置表格颜色
background：用于设置表格的背景图片
align：用于设置表格对齐方式或单元格内容的对齐方式
rowspan：表格跨行
colspan：表格跨列

三、表单

input

格式：

<input type="text" value="" name="" />

具体样式：

type="text"：文本框
type="password"：密码框
type="radio"：单选框; 实现单选设置同名 name（如:name="gender" ) (后面空白区加上 checked 表示默认选中)
type="checkbox"：多选框
type="file"：文件选择
type="button"：普通按钮
type="email": 邮箱
type="reset": 重置按钮
type="textarea"：多行的文本框---->可用于写反馈， “cols”和“rows”: 控制列和行
value="登录"：设置按钮的值
maxlength="6": 限制最大输入的个数
readonly: 只读
disabled: 禁止使用
size: 设置宽度（文本框）

格式：

<form action="day1_2.html" method="get">
	<input type="text" value=""/>
</form>

action：规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL”。
method：规定用于发送 form-data 的 HTTP 方法，值为：
get：安全性不高，对应的 action 的 URL 上会出现当前提交的表单信息
post：安全性较高，会隐藏信息

下拉列表框

<select name="" id="">
   <option value="苹果">苹果</option>
   <option value="葡萄">葡萄</option>
   <option value="香蕉" selected>香蕉</option>
   <option value="草莓">草莓</option>
</select>

后面加上 selected：默认选中

type 属性增加的属性值

email：用于应该包含 “e-mail” 地址的输入框
url：用于应该包含“URL”地址的输入框
search：用于应该“搜索内容”的输入框
number：用于应该包含“数值”的输入控件
tel：规定显示的类型为“电话号码”的输入框
range：规定显示的类型为“数值选择范围”选择控件
date：规定显示的类型为“日期”选择控件
month：规定显示的类型为“月份”选择控件
week：规定显示的类型为“周”选择控件
time：规定显示的类型为“时间”选择控件
datetime：规定显示的类型为“日期时间”选择控件
datetime-local：规定显示的类型为“本地日期时间”选择控件
color：规定显示的类型为“颜色”选择控件

四、多媒体应用

音乐和视频

<audio  controls="controls">
    <source src="./audio/cityOfSky.mp3"></source>
</audio>

controls：控制播放按钮
<audio> 和 <video> 标签具有以下属性：

width：设置视频播放器的宽度
height：设置视频播放器的高度
autoplay：如果出现该属性，则视频在就绪后马上播放（现在已经不支持全部主浏览器了，原因见上一节 Audio 标签的“autoplay”属性描述）
controls：如果出现该属性，则向用户显示控件，比如播放按钮
loop：如果出现该属性，则当媒介文件完成播放后再次开始播放
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。若和 "autoplay" 同时使用，则该属性值会被忽略。该属性的三个值同音频标签
src：要播放的视频的 URL 地址

posted @ 2024-06-22 18:22 星竹z 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

xingzhuz