初学html基础

正式

2024-04-24 帮助1人

1.什么是html？

HTML(hyper text markup language) 超文本标记语言
文字图片音频视频动画于一体

2.html的优势

世界知名多数浏览器厂商对html5 的支持
具备跨平台
根据W3C标准(World wide web Consortiam 万维网联盟)
成立于1994年，web技术领域最有权威和巨大影响力的国际中立性技术准机构

W3C标准包括

1.结构化标准语言(html,xml)
2.表现标准语言(css)
3.行为标准(DOM,ECMAscript)

3.html的格式

<iDOCTYPE HTML> 
<html>
<head>
<titer>标题<titer>
</head>
<body>
主体
</body>
</html>

4.网页的基本标签

学新通

5.图像标签

常用的图像格式 JPG GIF PNG BMP
导入图片语法
<img src="https://blog.csdn.net/a132457/article/details/图片路径" alt="图像显示不出就文字代替" title="鼠标悬停提示文字" width="宽" heigth="高">
图片路径分为， 1.相对路经(推荐使用)，2.绝对路径(从盘符开始)

超链接
1.页面间的链接(一个页面到另一个页面)
<a href="https://blog.csdn.net/a132457/article/details/要跳转的路径" target="在那个窗口打开">xxxxx</a>

target 常用值 _blank(在新窗口打开)，_self(在当前窗口打开)

2.锚链接(通常在回到顶部页面间的跳转中使用)

需要一个锚标记
跳转到标记
<a name="top">假设top是最顶部</a>
<a href="https://blog.csdn.net/a132457/article/details/123917679">通过#name名来实现</a>

3.功能性链接
<a href="mailto:3241580944@qq.com">联系我</a>

mailto: 邮箱链接
QQ推广有个自动生成代码

6.行内元素和块元素

块元素

无论内容多少，该元素独占一行
(p h1~h6)

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
(a string em)

7.列表(无序,有序,自定义)

列表是信息资源的一种展示形式

列表的分类
1.有序列表

<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>

2.无序列表

<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>

3.自定义列表

<dl>
<dt>标题</dt>
<dd>自定义</dd>
<dd>自定义</dd>
<dt>标题</dt>
<dd>自定义</dd>
<dd>自定义</dd>
</dl>

8.表格

表格基本结构
单元格 table
行 tr (rows 行)
列td(cols 列)
跨行 rowspan
跨列 colspan
border(边框)

表格语法

<table border="1px">加上border(边框)标签设置边框宽度
<tr>
<td></td>
</tr>
</table>
行包着列

9.视频和音频

视屏元素 video
音频元素 audio

语法

<video src=“路径” controls></video>
<audio src="路径" controls antoplay></video>
>controls 控制条
>antoplay 自动播放

没有控制条就什么都看不到

10.页面的构成分析

header	标题头部区域的内容
footer	标记脚部区域的内容
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

常用 header(头部) section(主体) nav(导航内容)

header 头部
section 主体
footer 底部

11.iframe内联框架

一个网站中内嵌一个网站或者是一个音频

语法
<iframe src="https://blog.csdn.net/a132457/article/details/引用页面路径地址" name="框架标识名"></iframe>

12.表单（重点）

语法案例

<form action="表单提交的位置" method="get(提交的方式)">
姓名<input type="text" name="user"></input>
密码<input typr="password" name="pwd"></input>
<input type="submit">--提交按钮
<input type="reset">--清空表单
</form>

type 指定元素的类型默认为text
action 表单提交位置可以是一个网站，也可以是一个请求地址
method 分别有 post ，get 提交方式
post 比较安全传输大文件
get 不安全传输速度快不可以传输大文件
submit 提交按钮
reset 重置清空表单按钮

type

type 指定元素的类型默认为text

元素名	介绍
text	文本框
password	密码框
Checkbox	多选框
radio	单选框
submit	提交按钮
resit	清空重置按钮
file	上传文件按钮
hidden	隐藏的
image	图像
button	普通按钮

元素名	介绍
name	指定表单元素的名称
value	设置初始值 type 为radio(单选框)时必须指定一个值
size	指定表单元素的初始宽度
maxlength	设置type 为text或password时输入的最大字符数
Checked	当type为radio(单选框)或checkbox(多选框)时指定按钮是否被选中

语法案例
1.按钮

<input type="buttion"> --普通按钮
<input type="image">   --图片按钮
<input type="submit">  --提交按钮
<input type="reset">   --重置按钮

2.单选框

<input type="radio" value="(初始值)sex" name="A" Checked="(默认值)男">男
<input type="radio" value="(初始值)get" name="a">女
`name的值要相同不然都可以选择`
`Checked 设置默认值`

3.多选框

<input type="checkbox" vlaue="(初始值)sex" name="A" Checked="(默认值)男">1
<input type="checkbox" vlaue="(初始值)get" name="b">2
<input type="checkbox" vlaue="(初始值)pot" name="c">3
`name的值可以相同也可以不相同但是推荐相同`

特殊一点的
4.下拉框

<select name="列表名">
<option valuer="(初始值)1">中国</option>
<option valuer="(初始值)2" selected>米国</option>
</select>
selected:默认选中

5.文本框(多行文本)

<textarea name="tetx" cols="10" rows="50"></textarea>
cols:列
rows:行

6.文件域

<input type="file" name="files">
上传文件

功能性表单
1.邮件验证

<input type="email" name="email">
输入如果不是邮箱将会自动报错

2.URL

<inupt type="url" name="url">
输入不是网址会自动报错

3.数字

<input type="number" name="number" max="100" min="0" step="10">
数值不可以大于100小于0 每次可以增加10
max:最大值
min：最小值
step： 每次增加数
一般用于购物数量时

4.滑块

<input type="range" name="range" max="100" min=0 step=1>
数值不可以大于100小于0每次可以增加1
max:最大值
min:最小值
step:每次增加数
一般用于调节音量

5.搜索框

<input type="search" name="search">

13.表单的应用

hidden 隐藏的
readonly 只读
disabled 禁用

语法案例
1.增强鼠标光标追踪

<label for="id">你点我</label>
<input type="text" id="id">
根据id点击对应的文字光标显示在文本框中

2.表单初级验证

<input type="text" name="user" placeholder="请输入">
<input type="tetx" name="user" required>
<input type="tetx" name="user" pattern="123">
placeholder:在文本框中提示
required:不允许为空
pattern:可以通过正则表达式验证 可以在脚本之家中找到常用的正则表达式

这篇好文章是转载于：学新通技术网

初学html基础

1.什么是html？

2.html的优势

3.html的格式

4.网页的基本标签

5.图像标签

6.行内元素和块元素

7.列表(无序,有序,自定义)

8.表格

9.视频和音频

10.页面的构成分析

11.iframe内联框架

12.表单（重点）

type

13.表单的应用

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐