HTML

HTML

W3C标准

  • World Wide Web Consortium(万维网联盟)

  • 成立与1994年,Web技术领域最权威和具有影响力的国际中立性技术标准机构

  • http://www.w3/org/

  • W3C标准包括

    • 结构化标准语言(HTML,XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM,ECMAScript)
<body></body>等成对出现的标签分别叫 开放标签和闭合标签

单独呈现的标签(空元素),如

;意为用/来关闭空元素

网页基本信息

注释格式

<!--   内容    -->
head 代表网页头部
body 代表网页肢体
<title>网页的标题</title>
<meta> 描述性标签,它用来描述网站的一些信息,一般用来做SEO

网页基本标签

  • 段落标签

    •   <p>
      表示段落
  </p>

  • 标题标签

  •   <h1></h1>
  数字越大,字号越大
  最小6,最大1

  • 换行标签

    •   <br/>
  自闭和标签后面最好带上斜杠/表示
  也可不带

  • 水平线标签

    •   <hr/>

  • 字体样式标签

    •   粗体<strong></strong>
  斜体<em></em>

  • 注释和特殊符号

    •   空格 : &nbsp;
  大于 : &gt;
  小于 : &lt;
  版权符 : &copy;
  记忆方法:&a;
  	输入任意字符再弹出的列表中选择需要的符号
  	也可百度搜索

    • 注意带分号

图像标签

常见图片格式

  • JPG
  • GIF
  • PNG
  • BMP
<img src= "path",alt= "text" title= "text" width="x" height= "y"/>  
src 图片地址
	推荐使用相对地址少用绝对地址
alt 当图片资源无法显示时,将显示alt设置的图片名字
title 悬停文字
width 宽
height 高

resources 资源

链接标签

  • 文本超链接

  • 图像超链接

  • 锚链接

    • 需要一个锚标记
    • 跳转到标记位置

    使用锚链接可以直接跳转到另一个页面的锚标记位置

  • 功能性链接

    • 邮件链接 : mailto
      • QQ链接,百度搜索QQ推广即可使用
<a href= " path " target="目标窗口位置">链接文本或图像</a>
href 链接路径,必填要跳转的路径
target 链接再那个窗口打开
	   常用值 : _self,_blank
		_blank 在新窗口中打开。 
		_self 默认。在相同的框架中打开。当前页面 
		_parent 在父框架集中打开。 
		_top 在整个窗口中打开。
<a href="#加标记名"></a>
两个页面跳转
<a herf="跳转的页面#跳转的位置"></a>

mailto 电子邮件

行内元素和块元素

  • 块元素
    • 无论内容多少,该元素独占一行
    • (p,h1-h6)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以再排再一行
    • (a,strong,em)

strong 强壮的

列表

什么是列表

​ 列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便留恋着能更快捷地获得相应的信息.

列表分类

  • 有序列表

    • <ol>
    <li>java</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
数字表示

  • 无需列表

    •   <ul>
      <li>java</li>
      <li>前端</li>
      <li>C/C++</li>
  </ul>
  点表示(默认)
  可用CSS更改样式
  应用范围 : 导航,侧边栏

  • 定义列表

    •   <dl>
      <dt></dt>
      <dd></dd>
      <dd></dd>
      <dd></dd>
  </dl>
  
  dl : 标签
  dt : 列表名称
  dd : 列表内容
  应用范围 : 公司网站底部

表格
  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<table>
    <tr>
    <td colspan="2"></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
</table>

三行三列
tr 行
td 列
colspan 跨列
rowspan 跨行

视频和音频

  • 视频元素

    • video

    • <vedio src="视频文件存放位置"
       controls(控制视频播放格式  视频控制台)
       autoplay(自动播放)
       >
</vedio>

  • 音频元素

    • audio

    • <audio src="音频文件存放位置"
       controls(控制音频播放格式  音频控制台)
       autoplay(自动播放)>

</audio>

页面元素结构

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

article 文章

nav 导航

aside 在一边

section 部分

iframe内联框架

格式

<iframe src= "引用页面地址(必填)" name="框架标识名" frameborder="框架边框" height="高" width="宽"></iframe>

表单

<form method="规定如何发送表单 常用值:post加密|get" action="表单向何处发送表单数据,如果省略 action 属性，则 action 会被设置为当前页面">
    <input type="text">文本框默认为20字符
    <textarea name="text" id="" cols="宽" rows="高"></textarea>
    <input type="password" name="" id=""/>
   	自带验证
    <input type="email" name="email"/>
    <input type="url" name="url"/>存放网址
    <input type="number" name="num" max="最大值" min="最小值" step="自增自减值"/>数字
    <input type="range" name="mp3"min="0" max="100" step="2"/>滑块
    <input type="search" name="search">搜索
    
    <select>
    	<option value="提交的值">显示的值</option>
    </select>
    
    
    <button>按钮</button>
    <input type="image"src="">图片按钮
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    
    <input type="password" name="密码" id="">
    
    <input type="radio" value="必填值" checked(默认选中) name="单选按钮组名必须相同">单选按钮
    <input type="radio" value="必填值"name="单选按钮组名必须相同">单选按钮
    <input type="checkbox" name="复选框名尽可能相同" value="提交的值">显示的值
    <input type="checkbox" name="复选框名尽可能相同" value="提交的值">显示的值
    
    <label for="放name值">增强鼠标可用性</lable>
</form>

元素格式

属性 说明
type 指定元素的类型.text(文本框),password(密码),checkbox(复选框),radio(单选框),submit(提交按钮),reset(重置按钮),hidden(隐藏的),file(文件),image(图片)和button(按钮).默认值为text
name(必填) 指定表单元素名称
value 元素的初始值,type为radio时必须指定一个值
size 指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位
maxlenght type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中
disabled 禁用
hidden 隐藏但还能提交,设置value值
redaonly 只读

upload 上传

search 搜索

表单验证

常用方式

  • placeholder
    • 默认提示信息
    • 格式
    • placeholder="提示信息"
  • required
    • 非空判断
  • pattern
 posted on 2022-05-03 10:17  yulll  阅读(28)  评论(0)    收藏  举报