HTML笔记

最新推荐文章于 2024-01-18 19:00:14 发布

枴蕾

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量124

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_44438461/article/details/127487075

版权

这篇博客详细介绍了HTML的基本语法，包括元标签、段落、换行、图像、链接、列表、表格、视频音频的使用。同时，深入讲解了HTML中的表单元素，如输入框、单选按钮、多选框、下拉菜单、文本域和文件域，以及表单的提交方式和验证方法。最后，提供了一个完整的HTML练习示例，帮助读者巩固所学知识。

摘要由CSDN通过智能技术生成

Html

HTML（HyperText Markup Language）学习

作业：学习完写一个页面包含所学习的内容，尽量好看，实用

前言

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一、w3c标准

结构化标准
表现标准语言
行为标准

二、Html的基本语法

基本标签

<meta> 用来seo ： 搜索引擎优化 描述性标签，用来描述我们的网站一些信息、
<!DOCTYYPE html> 告诉浏览器我们要使用什么规范
<p> 按住table 自动生成</p> 段标签
<br/> 换行标签 段与段的中间间距会相比于段标签小
<hr/> 水平线标签
<strong> 粗体
<em> 斜体
<! -- --> 注释符号
&nbsp；空格
特殊符号如何记？
& ；

图片标签

图片地址：绝对路径 相对路径（推荐） ../ --上一级目录
alt = 图片加载失败显示出来：没加载出来
<img sec="相对路径" alt= “失败出来文字” title=悬停文字 > 按住table
建立资源目录：resource：images

链接标签：跳转+点击

<a href=path target"目标窗口--新标签blank或者当前页面 self">
<a href=“定义的id”>锚链接--回到顶部：定义标记id=“id”
扩展：邮件连接 mailto：

行元素块元素

本质上就是标签是否可以换行

行元素：
1. 无论内容多少该元素独占一行
2. p h1- h6
块元素：
1. 内容撑开宽度，左右都是行内元素可以排在一行
2. strong em

行内元素：内容撑开宽度，左右都是行内元素可以排在一行strong em和块元素:无论内容多少，该元素独占一行（p h1）

列表

列表的分类：

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

<ol>
	<li></li>
</ol>
<ul>
	<li></li>
</ul>
dl:标签
dt：列表名称
dd：列表内容
<dl>
	<dt>主标题</dt>
	<dd>小列表</dd>
</dl>

表格

tr --- row
td---col
<table border = "表格边缘的宽度">
<tr>
	<td clospan=“3”>
</tr>
<tr>
	<td rowspan="3">
</tr>

练习：找一个表格进行制作

视频和音频

src、controls:控制条 autoplay：自动播放

<video src="./../" controls autoplay> </video>
<audio src=“mp3” controls autoplay> </audio>

页面结构分析

header
section：网页主体
footer
nav：导航类辅助内容

内联框架iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe 内联框架
src： 地址
w-h: 宽度高度
有name 还是在当前的网页中，无name跳转到你想要跳转的网页
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://blog.csdn.net/m0_52404216?type=blog" target="hello">点击跳转</a>
<!--这是一个哔哩哔哩的例子 iframe-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97256834&page=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>

重点：表单

form method：提交表单的方式 action：向何处发送表单数据

get 密码姓名等高效不安全
post 是看不到可以传输大文件

radio 单选框 name：代表一个组 checked选中

value：单选框的值（内容）
name：表示组（进行单选)

checkbox 多选框 checked默认选项

value
.name
button：按钮
name：代码中的名字
value：按钮的显示名字

下拉框 select name“列表名字” option ：value=“选项的值”
selected：默认选项

文本域：textarea
clos=“10” rows=“50” ”可以拉动“可以进行提交

文件域 type=“file”

如何查看：查看元素—header—formdata 可以使用后台加密解决安全问题

<form action="提交的目的地" method = “提交的方式”>
<p >密码<input type = "text" name="username" value=“初始值”
    maxlength=“最大长度” size=“文本框的长度”></p>
<p> 
	<input type = "submit">
	<input type = "reset" value=“重置”>
</p>
  <!--    文件域  input type="file"  name="files"   -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
</form>

功能性表单

email
url
number
ranger:滑块
search：搜索框

表单的应用

隐藏域：hidden
只读：readonly
禁用：disable
锁定框增强鼠标的应用性

表单的初级验证

placeholder=“提示信息” 输入框中使用
required 不能为空提示信息非空判断
pattern 正则表达式
自定义邮箱：百度查正则表达

总结

进行练习：2022、10、24：20：32

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html练习</title>
</head>
<body>
<!--表单提交的方式：通过type=submit提交 注意-->
<form action="跳转页面.html" method="get">
<h1>注册个人资料</h1>
<p>名字：<input type="text" name="username"  placeholder="用户名不能为空"></p>
<p>密码：<input type="text" name = "password" placeholder="密码不能为空"></p>
<p>
    性别：
    <input type="radio" name="sex" value="boy" checked>男
    <input type="radio" name="sex" value="girl">女
</p>
<p>
    爱好：
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <input type="checkbox" name="hobby" value="play code" checked>打代码
    <input type="checkbox" name="hobby" value="chat" > 聊天
    <input type="checkbox" name="hobby" value="play games"> 打游戏
</p>
国家：<select>
    <option>瑞士</option>
    <option selected>中国</option>
    <option>法国</option>
    <option>日本</option>
</select>
<p>
    <textarea name = "textarea" cols="30" rows="20"> 文本内容   </textarea>
</p>
<p>
    <input type="file" name = "files">
    <input type="button" value="上传" name="upload">
</p>
<p>
    <input type="submit" name="sub">提交
    <input type="reset" name="清空">重置
</p>
<hr>
<h1>功能性表单</h1>
<p>
    邮箱：
    <input type="email" name="email">
</p>
<p>
    url:
    <input type="url" name="url">
</p>
<p>
    商品数量：
    <input type="number" name="number" max="100" min="0" step="1">
</p>
<p>
    音量：
    <input type="range" name="voice" max="100" min="0" step="10">
</p>
<p>
    搜索：
    <input type="search" name="search" id="mark">
</p>
</form>
</body>
</html>