前端与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

相关文章
|
1天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
28天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
51 1
前端基础(十七)_HTML5新特性
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
28 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
36 1
|
3月前
|
前端开发 程序员
【前端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;`)。
71 19
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
204 1
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
61 13
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。