html学习1

1.了解html和浏览器

HTML是超文本标记语言（不是一种编程语言），是用来描述网页的一种语言。

标记语言是一套标记标签。

超文本：

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

网页：由网页元素组成，这些元素是利用html标签描述出来的，然后通过浏览器解析显示给用户看。

过程：前端人员开发代码-->浏览器显示代码（解析、渲染）-->生成最后的web页面。

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并且显示页面。

2.了解web标准

Web标准是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合。

浏览器不同，显示的页面和排版会由差异。

Web标准主要包括结构、表现和行为。结构最重要。

结构是用于对网页元素进行整理和分类，主要学的是HTML。
表现是设置网页元素的版式、颜色、大小等外观样式，主要是CSS。
行为是指网页模型的定义以及交互的编写，主要是Javascript。

结构、表现、行为相分离表现在结构写在HTML文件中，表现写在CSS文件中，行为写在JavaScript文件中。

3.标签

3.1标签的关系

包含关系和并列关系。

3.2标签的含义

<!DOCTYPE html> 表示文档类型为html类型

<html lang="en">　　lang是指语言，表示网站为英文网站，可以改成zh-CN，表示中文网站。

3.3使用标签

标题标签：<h1></h1>......<h6></h6>

段落标签：<p></p> 行与行的距离比较大。

换行标签：<br /> 换行标签是单标签，换行标签行与行的距离较小。

加粗：<strong></strong>或者<b></b>

斜体：<em></em>或者<i></i>

下划线：<ins></ins>或者<u></u>

删除线：<del></del>或者<s></s>

<div></div> div自己独占一行（大盒子）

<span></span> 一行可以多个span（小盒子）

图像标签：<img src="图像url" /> 单标签，其中src是必须要写的属性。alt属性是在图片显示不出来的时候显示的文本。title是在鼠标放在图片上的时候的提示文本。

超链接标签：<a></a> href是必须写的属性，为跳转链接，target是目标窗口的弹出方式，有_self（当前窗口打开页面）和_blank（新窗口打开页面）两种。链接分为内部链接、外部链接、空链接（链接用#代替）和下载链接，还有网页元素链接（在文本、图片、音频添加超链接，点击的时候进行跳转），锚点链接（点击链接定位到网页的特定位置）。

锚点链接：<a href="#biaoji"></a> 目标标签的位置添加id属性 id="biaoji"

3.4表格标签

<table></table>表格标签，align属性（表格对齐方式）、border（边框1或者""默认为""）、cellpadding（内容和边框的距离）、cellspacing（单元格和单元格的距离）、width（宽度）、height（高度）

<th></th>表头单元格，数据会加粗居中显示

<tr></tr>行标签

<td></td>列标签

完善表格结构

<thead></thead>表头标签，里面一定要包含<tr></tr>标签

<tbody></tbody>表头主体区域

跨行合并：rowspan=""

跨列合并：colspan=""

3.5列表标签

无序列表：<ul><li></li></ul> <ul></ul>标签里面只能由<li></li>标签，其他标签只能放在<li></li>标签里面

有序列表：<ol><li></li></ol> ol标签里只能放li标签

自定义列表：<dl><dt></dt><dd></dd><dl> dl里面只能出现dt和dd，一般是一个dt对应多个dd

3.6表单标签

<form action="url地址" method="提交方式" name="表单域名字"></form> 表单域

表单元素：

<input type="" /> 属性有：type、name、value、checked、maxlength。type是必须要写的属性，在radio和checkbox里面，要写上name属性，不然radio不能实现单选。还有要写上value值，便于后端获取所选的值。其他类型如text类型的时候，如果写了value值，会在文本框中出现。

type的类型有：button（普通按钮）、checkbox、file（文件域用于文件上传）、hidden（）、image（）、password、radio、reset（重置按钮）、submit（提交按钮）、text。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动把焦点（光标）转到对应的表单元素上，增加用户体验。

<input type="radio" name="sex" id="sex" />要添加一个id属性，id的内容要和label里面的for的内容一样。

<select><option></option></select>下拉表单元素至少包含一个option标签，option中可以写selected为默认选中。

<textarea>文本域元素，可以输入较多的文本，有cols（显示列数）、rows（显示行数）属性

posted on 2022-12-05 20:31 201812 阅读(21) 评论(0) 收藏举报