总结这周学习的html知识

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了总结这周学习的html知识相关的知识,希望对你有一定的参考价值。

html:超文本标记语言。用于定义文档的内容结构。(Hyper Text Markup Language)。

Hyper Text(超文本):不只包括文本,还包括图片。连接,音乐,视频等非文本元素。

Markup Language 标记语言 :是一套标记标签,html是使用标记标签来描述网页的。

html的注释:<!--注释内容-->
译:注释用于描述代码功能,浏览器解析代码会忽略注释内容
快捷键:ctrl+? 一下注释 二下撤销


html元素(标记,标签):

1.什么是html元素:html元素是html文档的重要组成部分,一个html文档由大量元素组成的html中的所有内容结构。都是靠元素组织到页面中。

例: <h3> </h3>
h3是起始标签(元素,标记)表示元素的开始 中间的空格之间是元素内容 /h3是结束标记(标签,标记)表示元素的结束

例: <a herf ="路径"> 百度 </a>
标记 属性名 属性值 元素内容 结束标记
(a 标记一个连接)

2.html 元素的组成部分

3.空元素:又叫自闭合元素
<img str =" " />

4 .元素的层次结构:一个元素的内容可以包含其他元素,形成嵌套的层次结构。但是2个元素之间不能嵌套。

例: <a>    <h3></h3>  </a>   对

例 :<p><strong></p><strong>    错

 

html文档结构:

1. 文档声明既不是元素,也不是注释,它总是出现在html代码的第一行。<! DocTYPE html >:用于通知浏览器,目前的文档正在使用那一个html的版本。若不是文档声明。浏览器渲染页面时会进入怪异模式。

2.html元素:又叫根元素,根标记,它是所有其他元素的祖先元素。文档中所有其他元素都必须放置在元素内容中。

相关属性:lang
该属性可能会影响到浏览器的语音阅读和翻译行为。

例:<html  lang= "en"></html>   文档中使用英文来书写

例:<html  lang= "zh-Cmn-Hans"></html>   文档中使用中文来书写

3 head 元素:又叫文档头,它是html元素的第一个子元素,文档头中可以包含一些其他元素,用于描述页面的附加信息。

litle 标题:标识文档标题,该标题会显示在浏览器的标题栏上货标签页上。

<meta>空元素,标识页面的其他元数据(页面相关的附加信息),只是一个空元素。

例: <meta charsef="utf-8">指浏览器,使用字符编码集utf-8解析页面。

head 元素中包含以下元素:<title><meta><style><link><script>

4.body元素:又叫文档体,网页中所有的可见内容都放在该元素中。
它包含了大量的其他元素,定义文档的内容结构。

 

绝对路径和相对路径:

引用css:

1.使用外部样式表:css代码在一个独立的文件中,html通过Link 元素引入到页面。

例:<link rel ="stylesheet" herf = " 导入路径">
link 空元素。表示引用外部资源。

2.使用内部样式表:将css代码写到html文档的style 元素内容中

使用内部样式表的特点:①没有样式表文件,在某些时候可以提升效率;
②多个页面难以共享样式,不利于代码复用。
③html和css代码混杂,不利于程序员和搜索引擎阅读。

3.使用行内样式表:又叫内嵌,css代码写在元素的style中属性,行内样式不写选择器。

使用行内样式表的特点:①没有了样式表文件,在某些时候可以提升效率。

 

head里面的子元素有:
搜属于元数据和脚本标签

<meta charset= "utf-8">

<title>哈哈</title>

<style type="text/css">

<link rel ="stylesheet" herf= "路径"></style>

<script>  </script>

<noscript>  </noscript>

<base herf=" "/>  来写出相应的命令

 

文本元素:

<a herf =" ww.baidu.com"> 百度</a>

</span>你好,世界!</span>  对长段文字当中一段文字进行改变

<b>你好,世界!</b> 不许用 加粗
<strong> 成都,你好!</strong> 有语意 加粗

斜体 <i> </i>
<em> </em>有着重效果,有语意,针对视力有问题的

缩写   <abbr title = "Hyper Text Markup Language"> HTML </addr>   显示的是HTML  ,当鼠标刚在HTML上 全称Hyper Text Markup Language"就显示出来了。

时间 <time datetime = "2018-2-14">情人节</time >
属性 值

字体 <small> </small>不建议使用 它只缩小一号

sup/sub   上下标签   ,X <sup>2  </sup>   显示的是x 的平方;O<sub> 2  </sub> 显示的是氧气

   引用:大段引用:<blockquote>  </blockquote> 默认前面 有缩进  它不属于文本元素,是组合内容

定义引用:<cite> </cite>   写相应的代码

<mark>  </mark>是一个标签。背景颜色自动为黄色

 

组合内容:

换行<br>  不能使用-

横线  <p>   <hr> </p>  不能用  分割上下

区域 区块之前的html用来进行布局:
<div>

</div>

预编译<pre>  </pre>代码中怎么写的怎么显示出来。用到的很少

 大段引用:<blockquote>  </blockquote> 默认前面 有缩进  

src 属性表示引用内部资源
<img src = "alt" ="logo">  当图片无法显示出来"logo"

 

herf 属性表示访问或获取外部资源   ;<link herf ="  ">外部样式

<a herf =" "> 跳转

 

图片描述
<figure>
<img src = “ ” alt ="logo">
<figcapiton> 蜡笔小新 </figcapiton>

<figure>

<head>
<meta name ="keyword" content="蜡笔小新,小白,美伢.."/> 关键字/关键词
<meta name ="discription" content="它是一部日本动漫,讲述了..."

</head>

 

列表:

有序列表
<ol>
<li> </li>
<li> </li>
</ol>
快捷键 ol>li*n tab键

无序列表
<ul>
<li> </li>
<li> </li>
</ul>
快捷键 ul>li*n tab键

定义列表
<dl>
<dt> 前端工程师</dt>
<dd> 需要具备</dd>
<dl>

 

表格元素:

<table border = "2"> 译2px 边框
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

快捷键: tr*行数>td*列数

td clospan = "几个单元格" column代表列 横向合并为列
td rowspan = "几个单元格" row 代表行 纵向合并为行

*表单元素 <form action = " #" method=" get/post" 

输入框:

<input type ="text"/>
<input type ="password"/>
<input type ="submit" value=" "/> 提交按钮,具有提交功能,浏览器可以识别
<input type ="button" value=" "/>普通按钮
<input type =" reset"/> 重置按钮
<input type =" number"min=" " max=" " step=" " value=" "/> ( max 最大值step间距/步数 value初始值 min最小值)
<input type ="text" required maxlength= " "/> 必填项 输入框的长度
<input type =" date"/> 添加日理插件
<input type =" color" name =" color"/> 你喜欢的颜色

    

select 下来菜单(列表):
ctr+d复制当前这行

<select name = " city" id=" ">
<option value =" cd" >成都 </option>
<option value =" my" >绵阳 </option>
<option value =" gy" >广元 </option>
......

</select >

单选框:

<input type =" radio" name= " aihao"value="paobu"/>跑步
<input type =" radio" name= " aihao"value="lvyou"/>旅游
<input type =" radio" name= " aihao"value="kanshu"/>看书
<input type =" radio" name= " aihao"value="huahua0"/>画画

 

 

多行文本框:

<input type =" checkbox" name= " aihao"value="paobu"/>跑步
<input type =" checkbox" name= " aihao"value="lvyou"/>旅游
<input type =" checkbox" name= " aihao"value="kanshu"/>看书

<input type =" checkbox" name= " aihao"value="huahua0"/>画画

 

提示快捷信息选择:
<input type ="text" list =" city"
<datalist id = "city">
<option value ="CD">成都 </option>
<option value ="SN">遂宁 </option>
.........
</datalist>

 

语义化结构元素:

header 用于表示页面或某个区域头部

nav 用于表示导航栏

aside 用于表示周围主题相关胡附加信息

article  用于表示文章或其他可独立页面胡内容

section 用于表示一个整体胡一部分主题

footer 用于表示页面或某个区域胡脚注

嵌入式元素:<img src  =  " ..."  alt ="logo">

 

音频/视频元素:

<audio src = " 路径" controls autoplay loop></audio> 音频播放
<video src = " 路径" controls autoplay loop> </video> 音频播放

controls 为属性,值也是 controls ,所以这里写一个 controls 就可以了
autoplay 自动播放,不用点开始
loop 循环播放

 

交互元素:
<datails>
<summary>
</summary>
<p>
</p>
</datails>



 
















以上是关于总结这周学习的html知识的主要内容,如果未能解决你的问题,请参考以下文章

第五周学习总结

一周总结

第四周学习总结

学习进度表

第五周学习总结

周学习总结