html学习笔记

最新推荐文章于 2022-08-11 19:56:51 发布

whafal

最新推荐文章于 2022-08-11 19:56:51 发布

阅读量414

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/l31299/article/details/79935414

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在慕课网上学习后，将基础知识记录下来以供查阅。

2018.4.13

1.HTML
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head>标签中包含文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。在<title>和</title>标签之间的文字内容，作为浏览器的标题栏。
网页设计遵循语义化，即网页中的内容根据其用处放在不同语义的标签中。
<p>标签：显示文章段落，一个段落放在一个<p>标签中。每个段落间默认有一段空白，可以通过css样式删除。
<h1>标签：文章标题，一般<h1>最重要，用于存放网站名称。There are six header labels,the larger the number in the labal , the smaller the font within the header labels.
<strong>,<em>标签：都用于强调，显示效果不同，<strong>中的内容加粗强调，<em>中的内容斜体强调。
<span>标签：没有语义，只为文字设置单独样式，没有强调的作用。
<q>标签：quote，用于引用别人的话，样式为加上双引号。
<blockquote>标签：对大段文字的引用，样式为左右两边缩进。
<br/>标签：分行显示文本，换行，html中输入空格回车不显示。
&nbsp：在html中添加空格。在html通过空格键打多个空格，只会显示一个空格。
<hr/> :horizontal rule。水平横线
</address>：为网页加入地址信息，样式为斜体
<code>:代码标签，适用于一行代码，防止网页运行代码。
<pre>:代码标签，适用于大段代码。
<ul>:unordered list无顺序的信息列表，里面使用<li>表示每一个信息，样式为一个圆点。
<ol>:ordered list 有序列表，里面使用<li>前都自带一个序号，序号默认从1开始
<div>：划分独立的逻辑部分，相当于一个容器，存放相同类型的数据。每个div一个id用于标识其唯一性和描述其存放的数据。
<table>:<tbody>…</tbody>：加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示。同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）。<tr> table row :表格行； <th> head：表格表头 ；<td>:表格数据；表格摘要：<table summary="表格简介文本">；表格标题：<caption>标题文本</caption>，应该写在<table>和<tbody>标签之间。
<a>:链接标签，属性href：Hypertext Reference ；属性title ：鼠标滑过链接文字时会显示这个属性的文本内容，便于理解语义。

2018.4.14

"_blank"为在新的空白页打开。href中使用mailto用于邮件发送
<img>：alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。
<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)；method ： 数据传送的方式（get/post）。
<input>: 当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框。name：为文本框命名，以备后台程序ASP 、PHP使用。value：为文本输入框设置默认值。(一般起到提示作用)
 当 type="radio" 时，控件为单选框; 当 type="checkbox" 时，控件为复选框;value：提交数据到服务器的值（后台程序PHP使用）;name：为控件命名，同一组选项框的name必须要相同，以备后台程序 ASP、PHP 使用；
当type值设置为submit时，按钮才有提交作用；value：按钮上显示的文字。
当type值设置为reset时，按钮才有重置作用；value：按钮上显示的文字
checked：当设置 checked="checked" 时，该选项被默认选中
<select>：下拉列表框，设置selected="selected"属性，该选项被默认选中。设置selected="selected"属性，可以实现多选功能
2.CSS
css 样式由选择符和声明组成，而声明又由属性和值组成,当有多条声明时，中间可以英文分号“;”分隔
css注释样式:/*ddddddddd*/
CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种.
内联式：在style=""双引号中
嵌入式：把css样式代码写在<style type="text/css"></style>标签之间；嵌入式css样式一般写在<head></head>之间。
外部式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。<link href="base.css" rel="stylesheet" type="text/css" />其中：css样式文件名称以有意义的英文字母命名，如 main.css。rel="stylesheet" type="text/css" 是固定写法不可修改。<link>标签位置一般写在<head>标签之内。
三种方法的优先级就近原则
css选择器:1.标签选择器；
          2.类选择器，语法格式：.类选器名称{css样式代码;}/*类前面要加入一个英文圆点*/；
          3.ID选择器，#id名称{css样式代码;}，一个id名只能使用一次。
子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素
包含选择器，即加入空格,用于选择指定标签元素下的所有后辈元素。如：.first  span{color:red;}；>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器：用*表示，匹配所有标签元素
伪类选择器：兼容性不太好，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了，如a:hover{color:red;}