HTML学习笔记

IDE 集成开发环境/高级代码编辑器

代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理

HTML(Hyper Text Markup Language 超文本标记语言)

一、HTML5特性

1、空白折叠现象

文字与文字间的多个空格、换行会被折叠成一个空格

标签内壁和文字之间的空格会被忽略

2、转义字符

常见转义字符:

转义字符意义
<小于号
>大于号
 空格(不会被折叠)
©版权符号

二、HTML的文档类型声明

HTML文件第一行必须是DTD(文档类型声明)

不写会引发浏览器兼容问题

html5 <!document html>

1、HTML注释

<!-- -->注释语法

快捷键Crtl + /

三、HTML标签对

<head>标签是对网页的配置信息

<body>标签是网页内容

1、meta标签

<meta>元标签 单标签 表示网页基础配置

1)字符集

charset='UTF-8'

字符集UTF-8包含所有字符,一个汉字占3字节

字符集gb2312(gbk)只有汉字英文,一个汉字占2字节

2)网页关键词和页面描述

name 表示设置描述的名字

content 设置网页关键词或者页面描述,也是搜索引擎显示的简介词语

name='Keywords'表示网页关键词

name='Description'表示页面描述

可以设置多个name content 但一个meta标签只能设置一组

2、title标签

<title> </title>表示网页名称

3、标题标签

h1~h6

h1标签一般只能放一个

4、段落标签

p标签

只有在p标签中显示内容才能换行

p标签中不能嵌套p标签或者h标签,h标签也不能嵌套p标签

5、div标签

用来将相关内容组合到一起,以与其他内容分割。

结合CSS使用实现网页布局。

容器/盒子  可嵌套

可添加class属性表示类名,类名服务于CSS

区域类名
页头header
logologo
导航条nav
横幅banner
内容content
页脚footer
6、列表标签
1)无序列表

适合导航栏,新闻栏之类

<ul> </ul><li> </li>配合使用,要注意缩进

<li>不能单独使用

<ul>的子标签只能是<li>

<li>标签是容器,内部可以放其余标签

<ul>
    <li>面包
        <p>
            面包真不错
        </p>
    </li>
    <li>牛奶</li>
</ul>

type属性 circle-空心圆 disc-实心圆(默认) square-实心方块

但是在HTML5中已经废弃,建议使用CSS代替。

2)有序标签

适合排行榜

<ol></ol><li> </li>标签配合使用

使用和<ul>类似

type属性

属性值意义
a小写英文字母编号
A大写英文字母编号
i小写罗马数字编号
I大写罗马数字编号
1表数字标号(默认)

start属性 必须是一个整数(不管编号类型),表示列表编号起始

reversed属性指定列表的条目是否倒叙排列。该属性不需要值只需要写该单词即可。<ol reversed> </ol>

3)定义列表

适合构成定义关系的文字

<dl> </dl>是定义列表标签,内容交替出现<dt> </dt><dd> </dd>标签。

dd是解释dt的内容的标签。

dt,dd是同级标签,必须放在dl中使用

也允许dtdd不交替出现而是处于不同的定义列表标签dl中

<dl>
    <dt>HTTML</dt>
    <dd>超文本标记语言</dd>
</dl>
7、img标签

单标签

用来在网页中引入图片,图片必须在项目文件夹中,一般存在images子文件夹中

src属性(source):图片存储目录和完整文件名

相对路径、绝对路径

../ 表示上一文件夹 ./ 表示同级文件夹,可省略

alt属性(alternate):对图像的文本描述,用于在无法加载图形的情况下,浏览器会在页面上显示alt属性中的备用文本,网页朗读器也会朗读alt中文本。

widthheight属性:设置宽度高度,单位是像素,但不用写单位,若只设置了一个属性,则表示按原始比例缩放图片。

8、a标签

<a>标签制作超级链接

超级链接是将网页和网页连接在一起的方法

<a href='www.baidu.com' title='哈哈哈哈' targer='blank'>百度</a>

href属性 支持相对路径和绝对路径

title属性 用于设置鼠标的悬停文本

target属性 规定在何处打开网页 设置为blank,即可在新标签页中打开网页(HTML4代,blank之前有一个下划线)

图片也可以变为超级链接

<a href='www.baidu.com'>
	<img src='...'>
</a>

页面内锚点

a标签上设置id属性后,在设置href属性中的网址后加#id即可直接跳转到该锚点部分(无网址只有#id则是该页面中的锚点)

下载链接

指向exeziprar等文件格式的链接,自动成为下载链接

邮件链接、电话链接

mailto:前缀的链接是邮件链接,系统将自动打开Email相关软件

tel:前缀的链接是电话链接,系统自动打开拨号盘

9、audio标签

在浏览器中加入音频 兼容到IE9

<audio controls autoplay loop src='音频地址'>audio标签</audio>

controls属性 没有值 加上controls表示显示播放控件

src属性 音频地址

autoplay属性 没有值 声明后音频会自动播放,但常用浏览器为了不打扰用户,可能不允许自动播放,必须用户点击后播放

loop属性 声明后将循环播放音频

常用音频格式:mp3oggwav格式

10、video标签

在浏览器中加入视频 兼容到IE9

<video controls autoplay loop src='视频链接' width='300'>video标签</video>

常见格式:mp4ogvwebmavi等格式

controlsautoplayloop属性跟audio标签一致

11、HTML5区块标签
区块标签说明
<section>文档区域,语义比div大
<article>文档的核心文章内容,会被搜索引擎抓取
<aside>文档的非必要相关内容,如广告
<nav>导航条
<header>页头
<main>网页核心部分
<footer>页脚
<address>地址
12、span标签

包裹文本,用于CSS设置

不会换行

13、<b> <u> <i>标签
标签说明
<b>加粗
<u>下划线
<i>倾斜
14、<strong> <em> <mark>标签
标签说明
<strong>代表特别重要的文字
<em>代表强调的文字
<mark>(HTML5)代表一段高亮的文字
15、<figure> <figcaption> 标签

<figure>标签代表一段独立内容,与说明<figcaption>配合使用,他是一个独立的引用单元

16、<form>标签

所有HTML表单都以一个<form>元素开始。

action属性表示表单要提交到的后台程序的网址

method属性表示表单提交方式,有get或者post(大小写都可)

<form action="",method="POST">
    
</form>
1)单行文本框

使用type属性为text<input>元素可以创建单行文本框,他是一个单标签。

value属性表示已经写好的值

placeholder属性表示提示文本,将以浅色文字卸载文本框中,并不是文本框中值。

disabled属性 不用值 表示用户不能与该文本框交互,即“锁死”

<input type="text" value="123" placeholder="请输入姓名" disabled>

2)单选按钮

使用type属性被设置为radio<input>元素可以创建单选按钮,互斥的单选按钮应该设置name属性相同

value属性,向服务器提交的就是value

checked属性 单选按钮有checked属性表示默认选中

<p>
    性别:
    <input type="radio" name="sex" value="" checked><input type="radio" name="sex" value=""></p>
3)label标签

label标签用来绑定文字和单选按钮,用户单击文字时也视为点了单选按钮。

<form>
    <P>
        性别:
    </P>
    <label>
    <input type="radio" name="sex" value="" checked></label>
	<label>
    	<input type="radio" name="sex" value=""></label>
</form>

HTML4时代,label是通过for属性和单选按钮进行绑定的,即label标签不能包裹单选按钮

<input type="radio" id="nan">
<label for="nan"></label>
4)复选框

使用type属性为checkbox<input>元素可以创建复选框,同组复选框的name为相同值。

value属性 向服务器提交的就是value属性

<form>
    <P>
        请选择爱好:
    </P>
    <label>
		<input type="checkbox" name="hobby" value="足球">足球
	</label>
	<label>
		<input type="checkbox" name="hobby" value="篮球">篮球
	</label>
	<label>
		<input type="checkbox" name="hobby" value="游泳">游泳
	</label>
</form>
5)密码框

使用type属性设置为password<input>元素可以创建密码框

<form>
    <p>
        请输入密码:
        <input type="password">
    </p>
</form>
6)下拉菜单

<select>标签表示下拉菜单,<option>是内部选项

下拉菜单默认选中是为<option>标签中添加selected属性

<select>
    <option value="alipay" selected>支付宝</option>
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

<option>不能单独放置,<select>中只能用<option>

7)多行文本框

<textarea> </textarea>表示多行文本框

rowcols属性,用于定义多行文本框的行数列数

8)三种按钮

表单中常见的三种按钮,也都是input标签,type属性值不同

value值是按钮上的值。

<button>时按钮上的值在 <button>按钮上的值</button>

<button>设置了type属性后,<button>就不具备提交功能了

<button>起始标签和闭合标签之间不仅可以写文字,还可以写其他内容,比如设置一张图片。

<button><img src="" alt=""></button>

<input>的两个标签则无法实现。

<button><input type="submit">按钮点击后,在谷歌浏览器上,浏览器顶部的刷新按钮会转一下,而<input type="button">则没有这个效果。

type属性值按钮种类
button普通按钮,可以简写为<button>``</button>
submit提交按钮
reset重置按钮
9)HTML5中新增的<input>种类
type属性控件
color颜色选择控件
data、time日期、时间选择控件
email电子邮件输入控件
file文件选择控件
number数字输入控件
range拖拽条
search搜索框
url网址输入控件

required属性 设置必填

typenumber、range时可设置的minmax属性,表示上下限

typesearch时,并不能直接实现搜索功能,需要后台实现,与文本框的区别在于,输入内容后会出现 **× ** 来直接清除内容

typeemailurl时,点击提交表单会检查这两者格式规范

10)<datalist>控件

<datalist>为输入框提供备用选项,当用户内容与备选文字相同时,会智能感应显示

<input type="text" list="province-list">
<datalsit id="province-list">
	<option value="山东">山东</option>
    <option value="陕西">陕西</option>
    <option value="上海">
    <option value="山西">    
</datalsit>
17、表格标签

<table> 表格标签,用来包裹 <tr> <td>

<tr> 即table row表格行

<td>即table data表格数据

<th>表示表格的标题小格,和<td>同一层级

border属性,表示表格边框粗细,要设置在<table>才会生效

width属性,调整表格宽度,不设置时宽度由内容撑开,<table>、<td>标签可以设置该属性,而<tr>标签设置时无效

height属性,通常用于<table>、<tr>标签来调整高度

widthheight属性单位默认px可省略;

widthheight`属性只有设置的比默认宽度、高度大时才会生效

align属性可以调整table整体水平位置,属性值分别为:leftcenterright代表水平居左、居中、居右显示

<tr>设置align属性可以设置该行所有<td>中的内容的水平对齐方式

caption属性是表格的标题,他常常作为<table>的第一个子元素出现

<!-- 如图即为三行三列表格,边框宽度为1像素,表格总宽度为100像素,且第一行为标题 -->
<table border="1" width="100">
    <caption>表格标题</caption>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>A</td>
        <td>A</td>
        <td>A</td>
    </tr>
    <tr>
        <td>B</td>
        <td>B</td>
        <td>B</td>
    </tr>
</table>
1)单元格合并

<colspan>属性用来设置<td>或者<th>的列跨度

colspan="2"代表该小格占两个列跨度

colspan="3"代表该小格占三个列跨度

<table border="1" width="100">
    <caption>表格标题</caption>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
    </tr>
    <tr>
        <td colspan="2">A</td>
        <td>A</td>
        <td>A</td>
    </tr>
    <tr>
        <td>B</td>
        <td colspan="3">B</td>
    </tr>
    <tr>
        <td>D</td>
        <td>D</td>
        <td>D</td>
        <td>D</td>
    </tr>
</table>

<rowspan>属性用来设置<td>或者<th>的行跨度

rowspan="2"代表该小格占两个行跨度

rowspan="3"代表该小格占三个行跨度

<rowspan> <colspan>可以同时存在

2)表格其他特性

<thead>标签定义表头

<tbody>标签定义表核心内容

<tfoot>标签定义表脚,通常是汇总行

表格可以嵌套,嵌套的表格要写在<td>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值