html基础

本文详细介绍了HTML的基本概念,包括网页的组成、HTML的作用、web标准的三个方面(结构、表现、行为)。强调了标签的语义性和常用标签的使用,如标题、段落、图像、超链接。还涵盖了表格和列表的创建,以及表单元素的使用,如input、select、textarea等,为初学者提供了全面的HTML入门知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html初识

一、网页相关概念

1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)

2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.

3.HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等

二、web标准

结构(网页元素的整理-html),表现(颜色等-css),行为(定义及交互-js)

三、标签的语义

每个标签都有自己的语义,记住标签的语义,把合适的标签放在合适的地方,可以让页面结构更清晰。

四、html基本结构标签

1、<!DOCTYPE html>文档类型声明 (采取什么版本显示网页)位置必须在文档的开头

2、<lang> 定义当前文档的语言 en英语 zh-CN中文

3、charset 字符集 可以通过<meta>标签中的charset属性来定义文档文字类型 (UTF-8万国码)

五、常用标签及字符

1、标题标签:<h1>-<h6>特点:独占一行,大小依次递减,都加粗

2、段落标签:<p></p>特点:文本在一个段落中会根据浏览器窗口的大小自动换行,段落跟段落之间有空隙

3、换行标签:<br/>特点:单标签

4、特殊字符: &nbsp;空格 &lt;小于号 &gt;大于号

5、注释:<!--内容-->ctrl+/快捷键

六、文本格式化标签(突出重要性)

1、<strong></strong>或者<b></b>加粗(推荐用strong)
2、<em></em>或者<i></i>倾斜(推荐用em)
3、<del></del>或者<s></s>删除线(推荐用del)
4、<ins></ins>或者<u></u>下划线(推荐用ins)

七、div和span标签

1、<div></div>特点:独占一行 大盒子
2、<span></span>特点:一行上可以有多个 小盒子

八、图像标签

<img src="文件名"/> 注:src是<img>标签的必须属性,用于指定图像文件的路径和文件名
属性:alt 替换文本,图像不能显示时出现
          title提示文本,鼠标放在图像上显示的文字
          width宽,height高(宽高只设置一个的时候,另一个会等比例变化)
          注:属性都要写在图像标签名后面,属性之间没有先后顺序,但属性之间必须有空格

九、html文件路径

1、相对路径:图片相对于HTML页面的位置 同一级只用写图像名 下一级要将保存图像文件夹的名字加上上一级的名字    上一级../文件名

2、绝对路径:从盘符开始到图片名或者网址

十、超链接标签

分类:1、外部链接

2、内部链接,目录文件夹内的相互跳转,直接写文件名

3、空链接<a href ="#"</a>

4、下载链接 地址链接的是文件 xx.exe或者是 zip等压缩包的形式

5、网页元素的链接

6、锚点链接<a herf="#名字"></a> 再去跳转的目标位置标签里设置id名字

表格和列表

一、表格(展示数据)标签

1、<table></table>定义表格的标签

2、<tr></tr>定义表格的行

3、<td></td>定义单元格

4、<th></th>表头单元格标签  加粗居中显示

二、表格属性

align 对齐方式

border 边框

cellpadding 内容与边框的距离

cellspacing 单元格之间的距离

三、表格结构标签

<thead>头部标签           <tbody>主体标签

四、合并单元格

跨行合并(上下) rowspan=""  

跨列合并(左右)colspan=""

目标单元格:跨行最上,跨列最左

五、列表(布局)标签

1、无序列表:<ul><li></li></ul>
特点:列表之间没有顺序,<ul>里面只能放<li>,不能放其他标签和文字,<li>里面放什么都可以,带有自己的样式属性可以用css来设置

2、有序列表:<ol><li></li></ol>

特点:跟无序列表一样

3、自定义列表:<dl>

                                    <dt>名词</dt>

                                    <dd>解释名词</dd>

                           </dl>

六、表单

1、表单(收集用户信息)标签

2、表单域:<form></form>将表单元素信息提交给服务器

属性: action=“url地址”     method=“提交方式”      name=“表单域名称”

3、input输入表单元素  (收集用户信息)<input type="属性值"/>

①text文本框  ②password密码   ③radio单选按钮(必须有相同的名字,才能实现多选一)

④checkbox复选框(必须有相同的名字)⑤value=“值”

⑥单选按钮和复选按钮可以用checked属性,当页面打开的时候自动勾选

⑦maxlength限制长度 submit提交按钮(可以通过value更改内容) reset重置按钮

⑧button普通按钮,启动js 

⑨file文件域(上传文件)

⑩label标签<label for="值">内容</label> <input id="值">将元素进行捆绑

4、select下拉表单元素

①格式:<select><option></option></select>   

②selected默认选中

5、textarea文本域表单元素(输入内容较多时)
①格式:<textarea>显示的文字</textarea>

②cols=“”(每行的字数)rows=“”(每列的字数)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值