HTML入门笔记1
HTML是万维网发明者蒂姆 伯纳斯 李发明的
HTML起手应该写
<!DOCTYPE html>
<html lang="zh-CN"> <!-- 表示该网页的默认语言 zh-CN表示简体中文 -->
<head>
<meta charset="UTF-8"> <!-- 字符编码的类型 不能乱改否则会乱码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 禁用缩放,适配手机 -->
<title>Document</title>
</head>
<body>
</body>
</html>
一些属性
1. contenteditable
可以让用户编辑有该属性的标签(元素)
2. tabindex
可表示TAB键移动元素的顺序
3. title
鼠标移动到元素上时会浮现title属性内的内容
4.class和id
class可以给一个标签做标记用于CSS选择器,id虽然表示唯一的标签,但是不保证其唯一性
5.hidden
可以将某一个标签的内容设置为不可见
常见的标签
<h1>-<h6>表示标题
<section>表示章节
<article>表示文章
<main>表示主要部分
<aside>表示次要部分
<header>表示头部
<footer>表示底部
html默认文字之间的所有空白都会缩进成一个空白,用<pre>标签包裹住内容就可以取消,要想换行也可以用<br>标签
<em>表示强调标签
<strong>默认样式为加粗
<code>将字体变为等宽字体,用来写代码
<quote>内联引用
<blockquote>块级引用
HTML入门笔记2
<a>标签
-
href属性 表示超链接所指向的地址 -
target属性 指定在哪个窗口打开超链接
=_blank表示在新标签页打开
=_self为默认值,在当前页面打开
当多个页面嵌套(iframe或ajax)时可使用_top和_parent
=_top表示在最上层的页面打开
=_parent表示该链接所在页面的上一层页面打开
=id表示在名字为id的页面打开,如果没有该页面就创建一个新的页面并且取名为id,在控制台中用window.name可查询到名字 -
<a href="javascript:;">JavaScript伪协议,在点击这个链接时会执行href中的js代码,现在多用于实现一个浏览器不做任何操作的链接,如果将href设置为空,点击会刷新页面,如果设置为#,点击则会跳转到页面顶部 -
href="#id"可跳转至该id所对应的标签 -
href="mailto:邮箱"点击链接可以发邮件至对应的邮箱 -
href="tel:手机号码"点击链接可以打电话
<table>标签
<tr>表示一行
<th>表示一个表头元素
<td>表示一个表格数据
相关样式
table-layout
将表格设置的像一个表格所必需的操作
border-collapse: collapse;将单元格之间的空隙合并
border-spacing: 0;表示表格每个单元格边框之间的距离
<img>标签
两个事件
onload事件表示图片加载成功所执行的函数
onerror事件表示图片加载失败所执行的函数
响应式(手机端图片适配)
max-width:100%;可保证你的图片宽度自适应手机屏幕
<form>标签(表单)
action属性表示你发出请求的路径(即想要请求的页面)method属性表示你发出请求的方法,可为GET或者POSTautocomplete为on时可以自动填充用户以前输入过的数据- 该标签与
<input>标签或者<button>标签连用
<button>标签
- 默认属性
type="submit" <form>标签当中必须要有一个type="submit"的按钮才能提交
<input>标签
type属性取值
"text"输入文字内容
"password"输入密码
"checkbox"多选(将所有选项的name设置为同一个才能实现)
"radio"单选(将所有选项的name设置为同一个才能实现)
"file"输入文件,加上multiple属性才能选择多个文件
<textarea>标签
可拖动文本输入框
<select>标签和<option>标签
选项输入
验证器
required当提交表单时有该属性的表单项未填时会自动提示未填写