首页IT科技html基本(01-HTML基础)

html基本(01-HTML基础)

时间2025-08-04 23:59:56分类IT科技浏览5771
导读:HTML基础 1、HTML的概念和作用 概念 HTML(Hyper Text Markup Language):超文本标记语言 超文本:不仅包含普通文本,还可以包含图片、视频、音频、超链接、表格等内容 标记语言:由标签构成的语言...

HTML基础

1                、HTML的概念和作用

概念 HTML(Hyper Text Markup Language):超文本标记语言 超文本:不仅包含普通文本                ,还可以包含图片                        、视频        、音频                、超链接                        、表格等内容 标记语言:由标签构成的语言 HTML的作用 编写网页

2        、W3C标准

网页主要由三部分组成 HTML:用于制作网页基础内容和基本结构 CSS:用于网页样式美化效果 JavaScript:用来制作数据验证        、交互行为效果                        ,可以动态 操作网页的元素增删改查

3                        、HTML的组成

标签 标签可以用于设置文本样式                、图片样式        、超链接样式等等                。用<>表示 例如:<h1>标签        ,代表一级标签                        。我们可以使用开始标签和结束标签包围文字        ,这些文字就以标题形式显示 属性 标签中还可以拥有属性                        ,属性可以位标签提供更多的信息 属性只能添加到开始标签中        。格式为:属性名=属性值 例如:align属性                ,表示对齐方式                。我们可以在开始标签中添加该属性        ,就能让内容显示在不同位置 eg

4                        、初始HTML页面属性说明

<!DOCTYPE.html>:HTML的文档声明 <html lang="en">: 根标签                        ,一个文件中只能有一个根标签                ,lang属性表示网页使用的语言,默认是en                        ,可以修改成zh <head>:头部标签 <meta charset="UTF-8">:设置字符集                        ,建议使用UTF-8 <title>:文档标题,显示在浏览器标签上 <body>:身体标签                ,包含所有的文档内容

5                、HTML基础语法

5.1、文本标签

h1~h6 用于文章标题                        ,一共有6级 1级最大        ,6级最小 这是块级标签                ,自带换行的功能 常用属性 align:标签对齐的方式 center居中                        、right右对齐                        、left左对齐 hr 水平线                        ,即可在此画一条水平线 <hr size="5"> 常用属性 width:设置水平线的宽度(长度) size:大小(粗细) color:线的颜色 font 设置字体、颜色                、字号等 PS 在HTML5中已经不推荐使用 内联标签        ,没有换行功能 常用属性 color:字体颜色 size:字体大小 face:字体        ,如:宋体 b bold加粗                        ,与strong功能一样 i italic斜体 br 换行 p 每个p标签代表一个自然段 paragraph                ,前后有一定间隔        ,首行没有缩进 常用属性 title:用于鼠标移上去显示提示文字信息

5.2                        、有序列表和无序列表

ol-li(有序列表) type属性 1:数字列表                        ,默认值 a                ,A:字母列表,包含大小写 i                        ,I:罗马数字编号 ul-li(无序列表) type属性 disc:黑心圆                        ,默认样式 circle:空白圆 square:黑色正方体

5.3        、特殊字符

什么是特殊字符 在HTML中,像<> “ ’ 空格 & 都是特殊字符                ,它们是语法本身的一部分                        。 常用特殊字符 特殊字符格式 以&开头                        ,以分号结尾        ,如&nbsp;表示空格

5.4                、div和span

标签 作用 特点 span 容器                ,可以包裹其他内容 是内联标签                        ,不带换行功能        ,用于小范围的内容划分 div 容器        ,可以包裹其他内容 是块标签                        ,不带换行功能                ,用于小范围的内容的划分        ,通常网页布局使用div将网页分成不同块

5.5                        、HTML案例-公司介绍

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司简介</title> </head> <body> <!-- 需求分析: - 1.将文本素材内容放入其中 - 2.使用<h1>标签设置标题                        ,修饰“公司介绍                ” - 3.使用<hr>标签加入水平线 - 4.使用4个<p>标签加入水平线 - 5.使用&nbsp;设置第一个段落首行文本缩进6个空格 - 6.使用<font>标签                ,设置第一段“黑马程序员                        ”字体颜色为红色 - 7.使用<i> <b>标签,设置第一段“传智教育“斜体与加粗 - 8.使用<span>标签                        ,设置其他段        ”黑马程序员“字体颜色为红色 - 9.价格部分使用无序列表:ul-li - 10.使用<br>标签实现换行                        ,在最后一段公司与版权中间实现 - 11.设置最后一段样式:文本居中,字体大小14px                ,颜色gray - 12.使用版权特殊字符实现©显示 --> <div> <h1>公司介绍</h1> <hr size="5"/> <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font>黑马程序员</font><i><b>传智教育旗</b></i> 下的高端IT教育品牌                        ,现已开设JavaEE        、产品经理        、HTML&JS+前端                        、C/C++                、 新媒体+短视频直播运营        、Python+人工智能                        、大数据                、UI/UE设计、软件测试                        、Linux云计算+运维开发                        、 拍摄剪辑+短视频制作、智能机器人软件开发                、电商视觉运营设计等培训学科        ,直营分校遍布北京                        、 上海        、广州                、深圳                        、武汉        、郑州        、西安                        、长沙                、济南        、重庆                        、南京                、杭州、成都                        、石家庄                        、合肥、 太原                、厦门                        、沈阳        、天津等城市        。 </p> <p> <span>黑马程序员</span> 是传智教育旗下高端IT教育品牌                ,致力于服务各大软件企业                        ,解决当前软件开发技术飞速发展        ,而企业招不到优秀人才的困扰        。我们的价值观: <ul> <li>责任        ,对教学质量精益求精全心全意教授好每一位学生                        。</li> <li>务实                        ,诚信待人                ,高效做事        ,不弄虚作假脚踏实地做好本职工作                。</li> <li>创新                        ,勇于创新                ,在工作中不断突破,为学生提供更优质的教学资源与服务        。</li> <li>育人                        ,在传授学生知识和技能的同时                        ,言传身教,正面引导学生实现人生应有的价值追求                        。</li> </ul> </p> <p><span>黑马程序员</span> 不仅着重培养学员的基础理论知识                ,更注重培养项目实施管理能力                        ,并密切关注技术革新        ,不断引入先进的技术                ,研发更新技术课程                        , 确保学员进入企业后不仅能独立从事开发工作        ,更能给企业带来新的技术体系和理念                。 </p> <hr/> <center><font size="2">江苏传智播客教育科技股份有限公司版权所有Copyright&copy;2006-至今, All Rights Reserved 苏ICP备16007882 </font></center> </div> </body> </html>

5.6                、图像标签

img标签的作用

在网页中显示图片

img标签格式

<img src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84"/>

常用属性

img标签显示图片 作用 src 图片地址 width 宽度        ,如果只指定宽度                        ,高度会按等比例缩放 height 高度 alt 如果图片丢失                ,出现的替代文字

PS:src不能写绝对路径

audio:定义音频。(MP3                        、WAV        、OGG)

src:规定音频的URL controls:显示播放控件

video:定义音频格式:如MP4        、WebM                        、OGG

src:规定视频的URL controls:显示播放控件

5.7                、链接标签

链接标签的作用

跳转到其他页面

链接标签的格式

<a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E7%9A%84%E7%9B%AE%E7%9A%84%E5%9C%B0">内容</a> 标签名 作用 备注 a 超链接跳转页面功能 1.href属性        ,表示超链接跳转指向的url地址;2.target属性                        ,页面打开方式                ,_self表示当前页,_blank表示新标签页

小结

超链接标签跳转页面的功能 <a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%E5%9C%B0%E5%9D%80">...</a> 超链接属性target的含义 表示设置跳转页面的打开方式 target="_self"表示在当前页面跳转 target="_blank"表示在新建标签页跳转

5.8        、表格标签

表格标签的作用

用来显示多条数据 用于一些页面的布局                        ,后期会使用div布局

表格布局其他标签与属性

标签名 作用 table 表格容器                        ,包含其他元素 tr 表示一行, table row th 列标题                ,加粗                        ,居中        ,table head td 普通单元格 caption 表格的标题 thead 在逻辑上将表格层分为三个部分:表格头部 tbody 在逻辑上将表格层分为三个部分:表格的主题(PS:如果没有写tbody                ,浏览器运行时会自动加上tbody) tfoot 在逻辑上将表格层分为三个部分:表格尾部 属性名 作用 width 表格宽度 border 外边框的粗细 align 对齐方式:用在table标签上是表示整个表格在父容器标签中居中;用在tr标签上表示表格这一行内容居中;用在td标签上表示这个单元格内容居中 rowspan 跨几行(将某几行融合为一行) colspan 跨几列(将某几列融合为一列) cellspacing 单元格之间的间距 cellpadding 单元格边框与内容之间的间距

5.9                        、表单标签

表单的作用

接收用户输入数据                        ,并提交数据给服务器

form表单格式

<form method="提交数据的方式" action="数据提交的目的地"> 手机数据标签 </form>

常用属性

form常用属性 作用 action 提交给服务器的地址 method 提交的方式

提交方法

提交方法 特点 GET 默认值        ,参数在地址栏显示 POST 参数不会显示        ,更加安全

注意事项

action 规定当提交表单的时候向何处发送表单数据                        , URL method:规定用于发送表单数据的方式 GET:浏览器会将数据直接附在表单的action URL 之后                        。大小有限制 POST:浏览器会将数据放到http请求消息体中                ,大小没有限制                        。 表单数据要想提交必须满足两个要求 1.必须使用form标签将表单项标签包起来 2.表单项标签必须要有name属性

6                、用户注册案例

用户注册案例显示效果 实现细节

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
适合女孩边考研的工作(可以做点什么**赚钱吗-女学霸边读研边**3年赚17万,富养自己,对生活有了明确目标)