HTML——菜鸟的重温之路

最新推荐文章于 2022-01-14 23:51:16 发布

Lia------Li

最新推荐文章于 2022-01-14 23:51:16 发布

阅读量376

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_36974981/article/details/79097800

版权

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 />

注释

<!--注释-->

特殊字符

字符   代码
<     &lt;
>     &gt;
"     &quot;
'     &apos;
&     &amp;
×     &times;
空格  &nbsp;
©     &copy;
®     &reg;
™     &trade;

新知识

行内元素与块级元素

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但是结课设计做的头昏脑涨，差得远吗？是的！
但是我还是学到了