HTML学习

最新推荐文章于 2024-08-23 10:53:05 发布

青柠97

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量174

点赞数

分类专栏： html学习心得文章标签： html

本文链接：https://blog.csdn.net/a1997bcd/article/details/82392187

版权

html学习心得专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML学习

1，浏览器（显示）
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
2，常见浏览器内核介绍
（1）Trident(IE内核)
（2）Gecko(firefox)
（3） webkit(Safari)
（4） Blink(chrome)
3， Web标准（重点）
Web 标准的好处
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
4，Web 标准构成
.HTML .css .js
html决定页面的结构，css决定页面的样式，js决定页面的行为

HTML 初识

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。
注意：体会文本标签语言几个词语
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。
用文字来描述网页标签

HTML骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

1 HTML标签：
作用所有HTML中标签的一个根节点。最大的标签根标签
2 head标签：文档的头部
注意在head标签中我们必须要设置的标签是title
3.title标签：文档的标题
作用：让页面拥有一个属于自己的标题。
4.body标签：文档的主体以后我们的页面内容基本都是放到body里面的
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML标签分类

1.双标签

<标签名> 内容 </标签名>

2.单标签

比如  <br />

HTML标签关系

1.嵌套关系

<head>  <title> </title>  </head>`这里写代码片`

2.并列关系

<head></head>
<body></body>

倡议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

文档类型

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。
字符集

<meta charset="UTF-8" />

UTF-8则包含全世界所有国家需要用到的字符

HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。
为什么要有语义化标签
1，方便代码的阅读和维护
2，同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3，使用语义化标签会具有更好地搜索引擎优化

HTML常用标签

标题标签 (熟记)

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义：作为标题使用，并且依据重要性递减

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。一般h1 都是给logo使用，或者页面中最重要标题信息。
段落标签( 熟记)

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签(认识)

<hr />是单标签

换行标签(熟记)

<br />

div span标签(重点)

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签(熟记)
b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈
标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

1，标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2，属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3，任何标签的属性都有默认值，省略该属性则取默认值。
图像标签img (重点)

<img src="图像URL" />

链接标签(重点)

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

注意：
1.外部链接需要添加 http:// www.baidu.com
2.内部链接直接链接内部页面名称即可比如 < a href=”index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

 1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）   <a href="#two">   
  2.使用相应的id名标注跳转目标的位置。   <h3 id="two">第2集</h3>

base 标签
-------
base 写到  <head>  </head>  之间
把所有的连接 都默认添加 target="_blank"
在新窗口打开

无序列表 ul （重点）
------------

列表项1
列表项2
列表项3
……


自定义列表（理解）
---------

名词1

名词1解释1

名词1解释2

… 名词2

名词2解释1

名词2解释2

…


表格 table(会使用)
-------------
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

… …

单元格内的文字

1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
**表格标题**
表格的标题： caption
定义和用法
caption 元素定义表格标题。

**合并单元格(难点)**
跨行合并：rowspan    跨列合并：colspan
**总结表格**
1. 表格提供了HTML 中定义表格式数据的方法。
2. 表格中由行中的单元格组成。
3. 表格中没有列元素，列的个数取决于行的单元格个数。
4. 表格不要纠结于外观，那是CSS 的作用。

表单标签(掌握)
--------

input 控件(重点)
------------
input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。
**label标签(理解)**
label 标签为 input 元素定义标注（标签）。

Male

textarea控件(文本域)

文本内容


下拉菜单
----
使用select控件定义下拉菜单的基本语法格式如下

选项1
选项2
选项3
…

注意：

1. select</select中至少应包含一对option></option。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域
---

各种表单控件

“`
常用属性：
Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
用于设置表单数据的提交方式，其取值为get或post。
name
用于指定表单的名称，以区分同一个页面中的多个表单。

青柠97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML学习1，浏览器（显示）浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。 2，常见浏览器内核介绍（1）Trident(IE内核) （2）Gecko(firefox) （3） webkit(Safari) （4） Blink(chrome) 3， Web标准（重点） ...
复制链接

扫一扫