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

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式