前端与HTML

简介: 一,什么是前端?前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。1.解决人机交互问题2.跨终端3.web技术栈

二,什么是html?

html是超文本标记语言,是用来描述web文档的一种标记语言,使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

三,HTML的语法

image.png

四,HTML的主体结构。

 <!DOCTYPE html> 
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>    
    </body>
    </html> 

注:其中DOCTYPE是告诉浏览器,当前当前的文本是HTML5。html标签 是HTML的开头和结尾标签,lang="en"表示语言是英文,也可以lang="zh"中文,也可以不写,不影响。
head是HTML的头部标签,里面可以写标题以及编码等,body则是HTML的主体内容。image.png

五,HTML的常用标签。

1.标题标签

从h1~h6,大小不同,例如:

<h1> h1</h1>

image.png

image.png

2.列表标签

有序列表

    <ol>
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
            <li>复仇者</li>
      </ol>  

无序列表

   <ul>
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
            <li>复仇者</li>
     </ul>  

自定义列表(dt是标题,dd是内容)

  <dl>
        <dt>代言人</dt>
        <dd>阿牛</dd>
        <dt>日期</dt>
        <dd>2001-07-06</dd>
    </dl>  

image.png

注: herf属性的属性值是当前要打开的链接,target属性表示打开方式,不写target则默认为target="_self",即在当前页面打开,还有_blank,_self,_parent等。

4.多媒体标签

<img src="./123.png" alt="截图" title="图片" width="400">
<audio src="./半生雪_是七叔呢.mp3" controls></audio>
<video src="./video.mp4" controls></video>  

image.png

image.png

注:他们都是单标签,src属性放多媒体文件的网址,img标签的alt属性表示图片因为某种原因未加载时显示的文字信息,title属性是当鼠标滑动到图片上时显示图片标题;controls属性:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。


5.输入标签

(1).input标签

    <input  placeholder="请输入name">
    <input  type="range">
    <input type="number" min ="1",max="10" >
    <input type="date">
    <textarea name="" id="" cols="30" rows="10">1223</textarea>

image.png

(2).多选框

   <p>
        <input type="checkbox">
        <input type="checkbox" checked="checked">
     </p>   

checked表示默认选中。

(3).单选框

  <p>
        <input type="radio" name="sport">
        <input type="radio" name="sport">
    </p>

image.png

6.文本标签

上面的标题标签也属于文本标签

p标签:段落标签

hr标签:水平线标签

br标签:换行标签

还有引用 标签q和blockquote

image.png

image.png

image.png

7.表格标签

table标签,thead放表头内容,tbody里放表格内容;tr标签表示行,th和td表示列,th是表头thead里的列,td是tbody里的列

 <table border="1" align="center" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>阿牛</td>
                <td>男</td>
                <td>学生</td>
                <td>冰岛</td>
            </tr>
        </tbody>       
    </table>

image.png

其中border是控制表格边框,0为没有,1为有;align属性控制表格位置;

cellpadding="20"表示表格内的文字距离边框20像素 ;cellspacing="0"表示表格框与表格框间距离为0,使得两个表格框中间中有一条边框线。这些属性后面用css都可以实现,一般用css操作。


表格的单元格可以合并,colspan合并列,rowspan合并行。

<table border="1" align="center" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">阿牛</td>
                <td>男</td>
                <td>学生</td>
                <td>冰岛</td>
            </tr>
            <tr>
                <td>wa</td>
                <td colspan="2">wa</td>
            </tr>
        </tbody>       
    </table>

image.png

8.其他标签

div和span:div和span都是容器,没有什么意义,div常用来布局,div是块标签,span是行内标签。

还有很多,上面的这些都是常用的

image.png

image.png

相关文章
|
7天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
|
2月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
67 6
|
5月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
76 1
前端基础(十七)_HTML5新特性
|
4月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
37 2
|
4月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
51 1
|
5月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
101 19
|
5月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
308 1

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    27
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    47
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    86
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    94
  • 7
    智能编码在前端研发的创新应用
    81
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    117
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    74