html学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

study_azhuo

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量171

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/study_azhuo/article/details/108317226

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

常用的五大浏览器IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等
常见浏览器内核（了解）
在这里插入图片描述

(1)移动端的浏览器内核主要说的是系统内置浏览器的内核。
(2)Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
(3)iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

3.web标准

web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
结构类似人的身体，表现类似人的着装，行为类似人的行为动作
理想状态下，他们三层都是独立的，放到不同的文件里面

4.html简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

超文本

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

5.html骨架格式

<html>   
    <head>     
        <title>页面标题</title>
    </head>
    <body>
         页面显示内容
    </body>
</html>

6.字符集

<meta charset="UTF-8" />

字符集(Character set)是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

基本语法

html文档后缀名 .html 或者 .htm
围堵（双）标签：有开始标签和结束标签。如
自闭和(单)标签：开始标签和结束标签在一起。如
标签可以嵌套：

需要正确嵌套，不能你中有我，我中有你

错误：<a><b></a></b>

正确：<a><b></b></a>

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
html的标签不区分大小写，但是建议使用小写。

4.常用标签

1.排版标签

2.文本格式化标签

3.图像标签img (重点)

<img src="图像URL" />

4.链接标签(重点)

文本或图像

注意

外部链接需要添加 http://
内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

5.表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

小结

表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
中只能嵌套类的单元格
标签，他就像一个容器，可以容纳所有的元素

6.列表

分类

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。


有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表单

作用

表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

常用控件

input 控件(重点)

<input type="属性值" value="你好">

label标签(理解)

label标签主要目的是为了提高用户体验

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

绑定方式


第一种用法就是用label直接包括input表单
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

第二种用法 for 属性规定 label 与哪个表单元素绑定

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

textarea控件(文本域)

<textarea  cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

select下拉列表

<select>
  <option selected =" selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

拓展

1.注释标签

 <!-- 注释语句 -->

快捷键是： ctrl + / 或者 ctrl +shift + /

2.路径(重点)

1.绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。

2.相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。

当前页面路径

./ 或者 /

上一级页面路径

…/

上一级的上一级页面路径

…/…/

3.HTML5语义化标签

html5中为了提高程序的可读性，提供了一些标签。

常用标签

定义标题栏——header

通常用来放置整个页面或页面内的一个内容区块标题

定义导航块——nav

是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

定义内容块——section

用于对网站或应用程序中页面的内容进行分段

通常由标题和内容组成

定义文章块——article

1）用来表示文档、页面中独立的、完整的、可以独自被外部引用的的内容。

2）通常包含头部（header）、底部（footer）元素

3）是一种特殊种类的section元素，它比section元素更强调独立性

定义侧边栏——aside

用来表示当前页面或文章的附属信息部分

定义脚注栏——footer

作为内容块的脚注

例如：添加注释，添加版权信息，相关阅读链接等

study_azhuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习笔记

常用的五大浏览器IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等常见浏览器内核（了解）(1)移动端的浏览器内核主要说的是系统内置浏览器的内核。(2)Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。(3)iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的3.web标准web标准有三层结构，分别是结构（html）、表现（css
复制链接

扫一扫

专栏目录