HTML

    技术2026-04-10  11

    HTML是什么? 百度百科:https://baike.baidu.com/item/HTML/97049 总结:“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言。HTML是用来开发网页的。(网页后缀 html,htm)html是标记语言不是编程语言。

    超文本:超级文本,比文本更加牛逼,可以更加丰富的呈现文字信息。 标记:也叫做标签,这个是html里面的一个基本语法,所有的结构都是通过标记来控制的。

    html的版本:html xhtml html5 http://www.w3school.com.cn/h.asp

    创建第一个HTML文件? 里面显示Hello World。 显示其他内容。

    如何更加丰富的控制这个网页? 通过标记

    什么是标记? 是开始标记是结束标记,xxx是标记名

    标记的语法 成对的标记,必须有开始标记,必须有结束标记。 单个的标记 直接结束,xx是标记名。 不区分大小写 所有标记和标记的属性都是英文输入法 (html的语法不严谨,在很多种情况,下都可以识别出来, 比如大小写,标记里面加空格,不写结束标记 我们编写的时候,尽量严谨一点!) html语法比较随意,在很多时候,可以自行测试效果。

    基本网页结构

    标题 身体

    文档类型声明

    放在第一行

    http://www.w3school.com.cn/tags/tag_doctype.asp 网页编码声明

    放在head标签里面 (支持中文的utf-8 gbk gb2312)

    标题标签 n从1到6,逐渐变小。(加速,行距,单独一样)

    注释

    <!--这里是注释-->

    水平线


    **换行**

    段落标签(分段落,自动换行,跟其他段落间距)

    预格式标签

    标记的属性(可以有多个属性,不分先后顺序)

    字体

    修饰标签 加粗 倾斜 下标

    显示特殊符号 http://www.w3school.com.cn/html/html_entities.asp  

    图片 如果使用百分比的时候,是相对于父容器大小的百分比 alt的作用:http://www.w3school.com.cn/tags/att_img_alt.asp alt利于搜索引擎的搜索

    相对路径和绝对路径 path = 当前路径./xx.jpg 上一级路径…/xx.jpg 上上一级路径…/…/xx.jpg (相对路径就是从当前路径寻找,当前路径只的是当前html所在路径) 下一级路径 xx/xx.jpg path=“C:\Users\souke\Desktop\web01\01.jpg” 一般在项目中都使用相对路径

    w3dschool HTML教程(可以当做字典来查询) http://www.w3school.com.cn/html/index.asp 可自行搜索w3cschool离线手册

    无序列表

    CoffeeMilk

    有序列表

    咖啡牛奶茶

    自定义列表

    水果 苹果 香蕉 运动 打篮球 踢足球

    超级链接 百度 百度 可以是本机页面,也可以是任意的网页地址(内部链接或者外部链接) 空链接 href="#" 超级链接可以给文字或者图片添加 target _self _blank _top _parent title属性 手放在链接上的时候显示的提示文字 name属性 定义锚名称

    跳转到锚点 (可以使用某个文字或者某个图片作为锚点,也可以定义一个空的锚点) href="#锚名"

    跳转到别的页面的锚点位置 href=“xxx.html#锚名”

    邮件链接 给我发

    文件下载 下载 浏览器会根据链接类型,决定是否下载。

    空格  

    --------------------------------------------第二章 表格 tr:table row td table data

    row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

    table上的属性 border width height align bgcolor cellspacing cellpadding tr上的属性 align水平对齐方式 valign垂直对齐方式 bgcolor width height td上的属性 height bgcolor

    表格合并操作 合并多列

    row 1, cell 1 合并多行 row 1, cell 1 多列多行合并 row 1, cell 1

    商品上月本月销量销售额销量销售额手机100500200400笔记本20045045700

    百分比

    单元格里面可以嵌套子表格 被嵌套的表格是一个完整的表格 要放在td,某个单元格里面

    表格的表头 效果:内容居中,加粗显示 注意:可以有多个表头

    HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

    表格的标题

    我的标题 100200300400500600

    表格的布局

    如何查看网页源代码 F12调试

    ------------------------------------------------表单 自己写一遍,有个印象就可以了,不用背不用记,后续遇到了再查询

    表单的作用 注册账号 登录账号 发表话题 发表问题 总结:需要输入信息,并提交给服务器的地方 表单的作用就是把用户输入的信息,发送给服务器处理。

    表单标签

    在表单标签里面可以包含各种其他标签 文本框,文本域,列表,单选框,多选框,按钮...... 上述一个或者多个来组成一个表单

    input 输入 textarea 文本域 select 下拉列表 option 下拉列表的项 button 按钮 …

    input 可以做文本输入框,按钮,文件,单选按钮,复选按钮 text 文本 password 密码 file 文件 checkbox 多选按钮 radio 单选按钮 button 按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏 image 图片

    text和password 其他属性 name 名字 maxlength 最大字符长度 value 默认值 placeholder 提示信息

    单选框

    复选框

    按钮(普通按钮,提交按钮,重置按钮)

    图片提交按钮按钮

    隐藏域

    下拉列表

    1 2 3 例子:月份选择,城市选择

    文本域

    form表单属性 action 提交路径 method get/post传送数据的方式 get直接把要传输的数据放在URL里面,适合传输少量数据,一般用于请求数据,明文传输 post把数据封装到http请求里面,适合传输大量数据和重要数据传输(登录,注册,发表文章) name 表单名字 target _self _blank 提交一个表单,相当于点击了一个超链接,打开了一个新的网页,不过通过表单的方式请求 网页的时候,这个请求里面是带有数据的。 enctype http://www.w3school.com.cn/tags/att_form_enctype.asp

    ---------------------------框架

    rows上下划分 cols 左右划分 frame的name,可以作为超链接的target(目标) 注意:不能将 标签与 标签同时使用!
    Processed: 0.010, SQL: 9