HTML
概念
HTML(超文本标记语言——HyperText Markup Language)是构成Web世界的基石。
它描述并定义了一个网页的内容。其他除HTML以外的技术则通常用来描述一个网页的
表现/展示效果(CSS)或功能(JavaScript)
重温
- 基础架构
<!doctype.html>
<html>
<head>
<meta charset="utf-8" />
<title>pkcomputer</title>
</head>
<body>
</body>
</html>
- 常用标签
1.双标签:
架构:<html><head><body>
网页名:<title>
标题字号:<h1><h2><h3><h4><h5>
链接:<a>
(href:指定 链接的地址;
target:指定 跳转链接的方式,默认值是 "_self"," _blank"指定在新窗口打开链接;
title:鼠标移入a链接会显示title的属性值内容)
段落:<p> <pre>
(在多数标签内,多个空格或者回车 会被解析成一个空格,除了:pre标签)
(pre会保留空格 缩进 回车)
列表:<ul><ol><dl>
(ul:un-无序; ol:order-有序; dl:dialogue-对话)
<li> (ul、ol下使用)
<dt><dd> (dl下使用的一对)
样式标签:<em><i> (斜体,强调)
<strong><b> (加粗)
<small> (小号文字,可以放在标题标签中,作为副标题使用)
<u><del> (下划线 删除)
<sup><sub> (上标 下标)
引用:blockquote (块级元素:独占一行的元素)
其它:<span> (内联元素:不独占一行的元素)
代码格式:<code>
普通容器:<div>
标记标签:<mark> (默认字体背景色为黄色)
2.单标签:
<meta />
图片:<img />
(href,title,alt)
(alt:当图片路径出现问题、无法正常显示时,alt的属性值会显示出来这个图片的内容)
分割线:<hr />
强制换行:<br />
输入框:<input />
- 注释
<!--注释-->
- 特殊字符
字符 代码
< <
> >
" "
' '
& &
× ×
空格
© ©
® ®
™ ™
新知识
行内元素与块级元素
1.特点
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
内联元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)内联元素只能容纳文本或则其他内联元素。
特点摘自:行内元素与块级元素的总结
2.具体元素
- 行内元素
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架(即行内框架)
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射(即热区)
<object> object对象
<script> 客户端脚本
- 块级元素
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体(正文)
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚(脚注或表注)
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行
2.差别
1)块级元素会独占一行,其宽度自动填满其父元素宽度
行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
2)块级元素可以设置 width, height属性,
行内元素设置width, height无效【注意:块级元素即使设置了宽度,仍然是独占一行的】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的
padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
3.相互转换
行内元素和块级元素都不是绝对的,可以相互转换,,通常有这些方式可以转换。
(1)display:inline-block,将行内非替换元素设置为行内块元素
(2)float:left/right,float就是隐形的把内联元素转换为块级元素。但是他不会占据一行,相当于display:inline-block;
(3)position,当对行内元素进行定位时,都会将行内元素转换为块级元素。
注意:只有通过display:block设置的行内元素才能继承父元素的宽度。
补充
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img
注意:a标签、p标签不可以自己嵌套自己!!!
重温感想
有的东西忘了不一定是忘了。就像是我忘记了HTML的标签和基础架构,但是再一看就觉得很熟悉,接受的也很快。
兴趣是最好的老师,一起学习的同学加舍友“拾光璇影”说,明显感觉到我的状态不如学PS和AI了,我自己却想不明白为什么自己会变化这么大。直到今天,我明白我喜欢设计和操作工具,我也喜欢网页的制作,但是对代码有着抵触的心理。所以说,兴趣是最好的老师。
说到老师,数据结构老师“邵哥”是个很好的老师,别的班的同学会来听他的课,班里的学生们也喜欢这个教的有趣又有用的“邵哥”。好老师很重要,像“邵哥”这样的;好的勤奋的学生也很重要,像学霸这样的。
反省整理了一下,自己学过C语言、C++却只能说自己学过,学过Android却不会连接数据库并且实现功能,学过Java但是结课设计做的头昏脑涨,差得远吗?是的!
但是我还是学到了