什么是HTML?
HTML,超文本标记语言(Hyper Text Markup Language)。不是编程语言,是一种标记语言,用来描述网页。HTML是各种类型网页开发的基础性语言。
用来展示字体效果的标签及属性
<h1>...</h1>标题字
<h2>...</h2>标题字
<h3>...</h3>标题字
<h4>...</h4>标题字
<h5>...</h5>标题字
<h6>...</h6>标题字
注:<h1>到<h6>数字越大,网页中显示的字体越小
<strong>...</strong>粗体字(给文字加粗)
<em>...</em>斜体字(使文字倾斜)
font-style字体风格 normal 默认值,标准文档样式 italic 斜体
font-weight字体粗细 bold 定义粗体字符, 100-900 定义由细到粗的字符
font-size字体大小 像素:px
font-family字体类型 “隶书” “楷体” 其他
color字体颜色 三种表示方式
HTML注释
<!--注释内容--> 作用:1、方便代码的阅读 2、在代码调试中可以暂时注释掉一些不必要的代码 3、当浏览器遇到注释时会自动忽略注释内容
特殊符号
空格 HTML源代码:
大于号 HTML源代码:>
小于号 HTML源代码:"
引号 HTML源代码:®
注册商标 HTML源代码:<
区段标记
<hr>带水平线的换行 在网页中加入平行线用来区分上下文
<br>直接到新行
<p>...</p>段落 在网页中描述具有一个相对完整的内容。
连结方式
<a href="#aaa"></a> 锚链接 <a name="锚点名称">...</a>锚标记
超链接<a href="链接地址" ></a> target="目标窗口位置" _self:自身窗口 _blank:新建窗口
<form method="post" action="xxx.html"></form> 发送表单数据的方式 标签属性:method 常用值:get | post 向何处发送表单数据 标签属性:action
图片标签
img 标明引入图片
src 引用图片的路径
alt 在图片不能正常加载时候显示的提示语
title 鼠标划上去显示的内容
width/height 设置图片的宽度和高度
视频标签
video 标明是一个视频
src 引用视频的路径
controls 显示播放器控件
autoplay 自动播放
loop 循环播放
width/height 设置视频外观的宽和高
音乐标签
audio 标明是一段音频
src 引用音频的路径
controls 显示播放器控件
autoplay 自动播放
loop 循环播放
路径
相对路径:不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
绝对路径:一般是指带有盘符的路径或完整网络地址。(因为每个人电脑内容不同,不会用)
列表分类
1、无序列表
<ul>用来声明无序列表。
<li>用来表示列表项。
<ul></ul>标签表示一个无序列表的开始和结束,<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。
<ul>标签和<li>标签配合使用,不能单独使用。
type属性,用于控制列表项符号。可以改变type属性值来调整列表项符号。
常用type属性:disc 默认值,实心圆“●” circle 空心圆“○” square 实心正方形“■” none 没有符号
2、有序列表
<ol>用来声明有序列表。
<li>用来表示列表项。
有序列表的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束,中间的列表项是<li>标签内容。
<ol>标签和<li>标签是配合使用,没有单独使用,而且<ol>标签内部不能存在任何其他标签,一般情况下只能存在<li>标签。
type属性,用于控制列表项符号。可以改变type属性值来调整列表项符号。
常用type属性:
type属性值:1 数字1、2、3…...
type属性值:a/A 小/大写英文字母
type属性值:i/I 小/大写罗马数字
3、自定义列表
<dl>用来声明自定义列表。
<dt>用来表示列表标题。
<dd>用来表示列表内容
<dl>标签和<dt><dd>标签是配合使用,没有单独使用,而且<dl>标签内部不能存在任何其他标签。
表格基本语法
跨行跨列:rowspan跨行 属性规定单元格可横跨的行数。 colspan跨列 colspan 属性规定单元格可横跨的列数。
<td> 标签:每行被分割为若干单元格使用td定义
<tr> 标签:表格均有若干行组成使用tr定义
<table> 标签:定义表格
表头单元格:<th> 标签:定义 HTML 表格中的表头单元格。
表格美化:borde 设置边框; bgcolor 设置背景颜色; align 设置表格在网页中的对齐方式; width/height 表格的宽度/表格高度; cellspacing 设置单元格与单元格之间的距离; cellpadding 设置文字与单元格之间的距离。
表单元素属性
文本输入:属性值:text,password 作用:text,表单中键入字母、数字等内容。 password,输入密码字段。
文件选择:属性值:file 作用:file,定义文件选择。
按钮:属性值:button 作用:button,定义普通按钮。
选择:属性值:checkboxes,radio 作用:checkboxes,表单复选框。 radio,表单单选框。
提交按钮:属性值:submit,image 作用:submit,定义提交按钮。 image,定义图片提交按钮。
重置按钮:属性值:reset 作用:reset,定义了重置按钮。
size属性:元素的宽度,当 type 为 text 或 password时。
<maxlength>标签:type为text 或 password 时,输入的最大字符数。
<checked>标签:type为radio或checkbox时,指定按钮是否是被选中。
下拉列表:<select> 标签 select 标签用于声明下来列表 option 标签用于声明列表项
表单的多行文本域
可见行数:标签属性:rows rows 属性规定 textarea 的可见高度。
可见宽度:标签属性:cols cols 属性规定 textarea 的可见宽度。
最大长度:标签属性:maxlength maxlength 属性规定文本区域的最大长度(以字符计)。
名称:标签属性:name name 属性为文本区规定名称。
表单的高级应用
隐藏域 type="hidden” 1、 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息。 2、处理表单的程序所使用。浏览者点击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。 3、隐藏只是在网页页面上不显示输入框,但是虽然隐藏了,还是具有form传值功能。
只读 readonly=“readonly” 禁用 disabled="disabled"
语义化表单
域: 使用<fieldset>来定义。将一组表单元素放到域中。
域标题: 使用<legend>。所谓的域标题就是给创建的域设置个标题。
表单元素标注
对表单元素进行标注,这样做的目的是为了增强鼠标的可用性。创建<label>标签写入相关内容。在<label>标签中加入 for 属性实现 label 绑定到哪个表单元素。对应在input中加入 id 属性进行关联。