1.
HTML 全名:HyperText Markup Language
是一种超文本标记语言,该语言书写的代码通常会被浏览器解析执行,用于定义文档的内容结构
2.
HTML的注释书写格式:<!--注释内容-->
HTML的注释主要用于描述代码功能
3.HTML元素是HTML文档的重要组成部分
表示元素的开始:起始标记、元素内容、结束标记【<h3>元素内容</h3>】
标记也可以叫做元素、标签
所有元素都有属性
4.
a标记:表示这是一个超链接
书写格式:<a href =“/classroom/17”>立即加入</a>
⑴元素内容:表示在页面上显示立即加入
⑵href属性:表示用户点击它后,会跳转到/classroom/17
5.
img元素没有元素内容和结束标记,类似于这种元素,称之为:空元素、自闭合元素
空元素书写方式:<标记名 属性>
<标记名 属性/>
6.元素的层次结构:一个元素的内容中可以包含其他元素,形成嵌套的层次结构,但两个元素之间不能互相嵌套
7.
文档声明既不是元素,也不是注释,它总是出现在HTML代码的第一行
书写代码:<!DOCTYPE html>
8.html元素又叫做根标记、根元素,它是所有其他元素的祖先元素,文档中所有其他元素,都必须放置在它的元素内容中
9.相关属性:lang
该属性指定文档中的文字是用何种自然语言书写的
该属性可能会影响浏览器的语音阅读和翻译行为
10.
head元素又叫做文档头,它是html元素的第一个子元素
文档头中可以包含一些其他元素,用于描述页面的附加信息(head元素中的内容不会显示到页面上)
head元素中通常包含以下元素:
<title>标识文档标题,该标题会显示在浏览器的标题栏或者标签页上
<meta>标识页面的其他元数据(页面相关的附加信息),这是一个空元素
示例:<meta charset ="UTF-8">
指示浏览器,使用字符编码集UTF-8解析页面
为了获得更好的地域兼容性,避免乱码,应将字符编码集设置为UTF-8,并且将该代码作为head的第一个子元素
11.body元素又叫做文档体,网页中所有的可见内容都放置在该元素内
12.元素标签:
<ul>→<li>(无序)
<ol>→<li>(有序)
<dl>→<dd>、<dt>(自定义)
<p>(段落标签)
<pre>(预格式文本)→作用:还原所输内容
<q>(小段引用)
<blockquote>(大段引用)
<span>(跨越多个字符和文字)
<b>、<strong>(字体加粗)
<em>、<i>(斜体)
<figure>(标识插图)
<figcaption>(对图片的描述)
<br>(换行)
<hr>(分割线)
<div>(划分页面区块)
<hgroup>(对网页或区段的标题元素{h1-h6}进行组合)
13.特殊字符:
<;表示小于号
>;表示大于号
&nusp;空格
①版权符号:©;
②已注册符号:®;
③&符号:&;
14.
下标:0<sub>2</sub> 上标:X<sup>2</sup>
简写-全称写在title属性中:<abbr title="HyperText Markup Language">HTML</abbr>
日期标签、时间标签:<time datetime="2017-09-28">情人节</time>
插入图片:<img src="../dm_pic01.jpg" alt="01tupian">
音频、视频:<video src="../../imges/movie.mp4" ></video>
controls音频、视频播放插件和按钮:<audio src="../../imges/baluoke.wav" controls></audio>
改变字体颜色:<span style="color:red;">账号</span>
输入框:
账号:<input type="text">
密码:<input type="password">
单选框:(兴趣)
<input type="radio" name="xingqu" value="sheying">摄影
<input type="radio" name="xingqu" value="LOL">LOL
多选框:(爱好)
<input type="checkbox" name="aihao">打豆豆
<input type="checkbox" name="aihao">吃火锅
多行文本框 (cols代表列,rows代表行):<textarea name=" " id=" " cols="30" rows="10"></textarea>
下拉列表、下拉框:(省份)
<select name="shengfen">
<option value="sichuan">四川省</option>
<option value="hubei">湖北省</option>
</select>
输入框提示信息:
①邮箱:<input type="text" placeholder="请输入你的邮箱">
②<input type="text" list="F44list">
<datalist id="F44list">
<option value="kevin"></option>
<option value="polo"></option>
<option value="magie"></option>
<option value="Jack"></option>
</datalist>
收缩框:
<details>
<summary>
点我有惊喜
</summary>
<p>hahahahahahaha,被骗了</p>
</details>
表格:
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
按钮:
<input type="button" value="haha">(普通按钮)
<input type="submit">(提交按钮)
<input type="reset">(重置按钮)
表单:(action提交地址,method提交方式get/post)
<form action="#" method="get">
账号:<input type="text" name="username">
密码:<input type="password" name="pwd">
<input type="submit">
<input type="reset">
</form>
设置文本框文本长度:<input type="text" maxlength="11">(最多输入11位数字)
添加日历插件选择: 年月日:<input type="date">
数值型输入框(min最小值/起始值、max最大值、value默认值、step差值): 身高:<input type="number" min="150" max="200" step="50" value="160">
滚动条选择: 体重:<input type="range" min="10" max="100" name="weight">
颜色选择: 喜欢的颜色:<input type="color" name="color">
15.语义化结构元素:
<header>用于表示页面或某个区域的头部
<nav>用于表示导航栏
<aside>用于表示跟周围主题相关的附加信息
<article>用于表示文章或其他
<section>用于表示一个整体的一部分主题
<footer>用于表示页面或某个区域的脚注
16.
绝对路径:访问站外资源,书写格式:协议//域名/目录
相对路径:访问站内资源,书写格式:./路径
posted on
2017-10-08 15:53
张萤莹
阅读(
902)
评论()
编辑
收藏
举报