HTML打基础

192 阅读3分钟

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>标签

  1. href属性 表示超链接所指向的地址

  2. target属性 指定在哪个窗口打开超链接
    =_blank表示在新标签页打开
    =_self为默认值,在当前页面打开
    当多个页面嵌套(iframe或ajax)时可使用_top_parent
    =_top表示在最上层的页面打开
    =_parent表示该链接所在页面的上一层页面打开
    =id表示在名字为id的页面打开,如果没有该页面就创建一个新的页面并且取名为id,在控制台中用window.name可查询到名字

  3. <a href="javascript:;"> JavaScript伪协议,在点击这个链接时会执行href中的js代码,现在多用于实现一个浏览器不做任何操作的链接,如果将href设置为空,点击会刷新页面,如果设置为#,点击则会跳转到页面顶部

  4. href="#id" 可跳转至该id所对应的标签

  5. href="mailto:邮箱" 点击链接可以发邮件至对应的邮箱

  6. href="tel:手机号码" 点击链接可以打电话

<table>标签

<tr>表示一行
<th>表示一个表头元素
<td>表示一个表格数据

相关样式 table-layout
将表格设置的像一个表格所必需的操作
border-collapse: collapse;将单元格之间的空隙合并
border-spacing: 0;表示表格每个单元格边框之间的距离

<img>标签

两个事件

onload事件表示图片加载成功所执行的函数
onerror事件表示图片加载失败所执行的函数

响应式(手机端图片适配)

max-width:100%;可保证你的图片宽度自适应手机屏幕

<form>标签(表单)

  1. action属性表示你发出请求的路径(即想要请求的页面)
  2. method属性表示你发出请求的方法,可为GET或者POST
  3. autocomplete为on时可以自动填充用户以前输入过的数据
  4. 该标签与<input>标签或者<button>标签连用

<button>标签

  1. 默认属性 type="submit"
  2. <form>标签当中必须要有一个type="submit"的按钮才能提交

<input>标签

type属性取值
"text"输入文字内容
"password"输入密码
"checkbox"多选(将所有选项的name设置为同一个才能实现)
"radio"单选(将所有选项的name设置为同一个才能实现)
"file"输入文件,加上multiple属性才能选择多个文件

<textarea>标签

可拖动文本输入框

<select>标签和<option>标签

选项输入

验证器

required当提交表单时有该属性的表单项未填时会自动提示未填写

每个input都要有name!!!