Html的基础知识

1.初始html

 1 <!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <!--head标签表示网页头部-->
 5 <head>
 6 <!--meta描述性标签，它用来描述我们网站的一些信息-->
 7 <!--meta一般用来做SEO-->
 8     <meta charset="UTF-8">
 9     <meta name="keywords" content="你一定可以的">
10     <meta name="description" content="你不能放弃">
11 <!--title:网页标题    -->
12     <title>第一个网页</title>
13 </head>
14 <!--body代表网页主体-->
15 <body>
16 hello,world!
17 </body>
18 </html>

2.html的基本标签

标题标签：<h></h>

1 <h1>一级标签</h1>
2 <h2>二级标签</h2>
3 <h3>三级标签</h3>
4 <h4>四级标签</h4>
5 <h5>五级标签</h5>
6 <h6>六级标签</h6>

段落标签：<p></p>

1 <p>两只老虎，两只老虎</p>
2 <p>跑得快，跑得快</p>

换行标签：<br />
水平线标签：<hr/>
字体样式标签：

1 粗体： <strong></strong>
2 斜体： <em></em>

注释和特殊符号

1 注释的快捷键：ctrl + /
2 <!--特殊符号-->
3 空格：&nbsp;4 大于符号 >: &gt;
5 小于符号 <: &lt;
6 版权符号©: &copy;

3.图像、超链接、网页布局

常见图片格式：JPG、GIF、PNG 、BMP位图

 1 <!--img学习-->
 2 src:图片地址，推荐使用相对地址（必填）[ ../ 代表返回上一级目录] [ / 代表根目录 ] [./ 当前目录] 
 3 alt:图片名字，进行图片的错误提示（必填）
 4 title"鼠标放在图片上显示的文字
 5 width:宽
 6 height：高
 <img src="../resources/image/1.jpg" alt="错误提示" title="悬停文字" width="300" height="300">

超链接

 1 <!--a标签-->
 2 href:必填，表示要跳转到哪个页面
 3 target:表示窗口在哪里打开
 4 _blank:在新标签中打开
 5 _self:在自己的网页中打开（默认）
 <a href="1.我的第一个网页.html" target="_blank">点击我跳转到我的第一个网页</a>
 <a href="https://www.baidu.com">点击我跳转百度</a>
 <br/>
 <a href="1.我的第一个网页.html">
   <img src="../resources/image/1.jpg" alt="错误提示" title="悬停文字" width="300" height="300">
 </a>

锚链接

 <!--锚链接-->
   1.需要一个锚标记
   2.跳转到标记
    使用 #
   <a href="#top">回到顶部</a>
 <!--使用name作为标记-->
   <a name="top">顶部</a>

功能性链接

 <!--功能性链接-->
   邮件链接：mailto: 
  <a href="mailto:2493595093@qq.com">点击联系我</a>

4.列表、表格、媒体元素

列表：

块元素：无论内容多少，该元素独占一行（p、h）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a,strong,em）
列表：使信息结构化和条理化，并以列表的样式显示出来。分为无序列表、有序列表、自定义列表

 <!--有序列表-->
  <ol>
     <li>前端</li>
     <li>后端</li>
     <li>测试</li>
 </ol>
 <hr/>
<!--无序列表-->
应用范围：导航、侧边栏
 <!--无序列表-->
  <ul>
    <li>前端</li>
    <li>后端</li>
    <li>测试</li>
    <li>运维</li>
 </ul>
 <hr/>
<!--自定义列表-->
 dl:标签
 dt:列表名称
 dd:列表内容
 应用方案：公司底部
 <dl>
  <dt>就业方向</dt>
  <dd>前端</dd>
  <dd>后端</dd>
  <dd>测试</dd>
 </dl>

表格：

单元格
行
列
跨行
跨列

 1 <!--表格table
 2 行：tr
 3 列：td
 4 -->
 5 
 6 <table border="1px">
 7     <tr>
 8 <!--colspan:跨列-->
 9         <td colspan="3" align="center">学生成绩</td>
10     </tr>
11     <tr>
12 <!--rowspan:跨行-->
13         <td rowspan="2">狂神</td>
14         <td>语文</td>
15         <td>100</td>
16     </tr>
17     <tr>
18         <td>数学</td>
19         <td>99</td>
20     </tr>
21     <tr>
22         <td rowspan="2">秦疆</td>
23         <td>语文</td>
24         <td>99</td>
25     </tr>
26     <tr>
27         <td>数学</td>
28         <td>98</td>
29     </tr>
30 </table>

媒体元素

1 <!--音频和视频
2 src:资源路径
3 controls:控制条
4 autoplay:自动播放
5 -->

5.页面结构分析

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

6.iframe内联框架

 1 <iframe src="引用页面地址" name="框架标识名"</iframe>
 2 
 3 <!--iframe内联框架
 4 src:地址
 5 width:宽度
 6 height:高度
 7 -->
 8 
 9 <iframe src="" name="go" frameborder="0" width="1000" height="800"></iframe>
10 <a href="https://www.bilibili.com/" target="go"> 点击跳转</a>

7.表单及表单应用

表单元素格式：

type:指定元素类型，text（默认）,password,checkbox,radio,submit,reset,file,hidden,image,button
name:指定表单元素的名称
value:元素的初始值，type为radio时必须指定一个值
size：指定表单元素的初始长度，当type为text或password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位。
maxlength:type为text或password时，输入最大的字符数
checked:type为radio或checkbox时，指定按钮是否是被选中

表单的应用：

隐藏hidden,只读readonly,禁用disabled

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登录注册</title>
 6 </head>
 7 <body>
 8 <h1>注册</h1>
 9 <!--表单form
10 action:表单提交的位置,可以是网站,也可以是一个请求处理地址
11 method:post,get提交方式
12        get方式提交:可以在url中看到我们提交的信息,不安全但是高效
13        post方式提交:比较安全,可以传输大文件
14 -->
15 <form action="1.我的第一个网页.html" method="get">
16 <!--文本输入框:input type="text"
17  value=" "默认初始值
18  maxlength="" 最长能写几个字符
19  size= "" 文本框的长度-->
20     <p>名字:<input type="text" name="username"></p>
21 <!--密码框:input type="password"    -->
22     <p>密码:<input type="password" name="pwd"></p>
23 <!--单选框标签
24 input type="radio"
25  value="girl" 单选框的值
26  name:表示组,每个name一样
27  默认选择加checked
28     -->
29     <p>性别:
30         <input type="radio" value="girl" name="sex"/>女
31         <input type="radio" value="boy" name="sex"/>男
32     </p>
33 <!-- 多选框
34  input type="checkbox
35  默认选择加checked
36  -->
37     <p>爱好:
38         <input type="checkbox" value="run" name="go">跑
39         <input type="checkbox" value="jump" name="go" checked>跳
40         <input type="checkbox" value="hang" name="go">走
41     </p>
42 <!-- 按钮
43    input type="button" 普通按钮
44    input type="image" 图片按钮
45    input type="submit" 提交按钮
46    input type="reset" 重置
47    -->
48     <p>按钮:
49         <input type="button" name="btn1" value="点击领取">
50 <!--        <input type="image" src="../resources/image/1.jpg">-->
51     </p>
52 <!-- 下拉框
53   -->
54     <p>下拉框:
55         <select name="列表名称" >
56             <option value="apple">苹果</option>
57             <option value="orange">橙子</option>
58             <option value="ban" selected>香蕉</option>
59             <option value="watermelon">西瓜</option>
60         </select>
61     </p>
62 <!-- 文本域:
63      cols="40" rows="10"-->
64     <p>反馈
65         <textarea name="textarea" id="" cols="40" rows="10">文本内容</textarea>
66     </p>
67 <!-- 文件域
68 input type="file" name="files"
69    -->
70     <p>
71         <input type="file" name="files">
72         <input type="button" value="上传" name="upload">
73     </p>
74 <!-- 邮箱验证 -->
75     <p>邮箱:
76         <input type="email" name="email">
77     </p>
78     <!-- url -->
79     <p>url:
80         <input type="url" name="url">
81     </p>
82     <!-- 数字 -->
83     <p>商品数量:
84         <input type="number" name="num" max="100" min="0" step="10">
85     </p>
86 <!-- 滑块   -->
87     <p>音量:
88         <input type="range" name="voice" min="0"max="100" step="2">
89     </p>
90 <!--搜素框    -->
91     <P>搜索
92         <input type="search" name="search">
93     </P>
94     <input type="submit">
95     <input type="reset">
96 </form>
97 </body>
98 </html>>

8.表单初级验证

常用方式：

placeholder：提示信息

1  placeholder="请输入用户名" 可用在所有输入框中

required：非空判断

pattern：正则表达式

posted on 2021-10-25 23:39 我不想一直当菜鸟阅读(223) 评论(0) 编辑收藏举报

Html的基础知识

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜