初识Html以及简单的标签

最新推荐文章于 2024-07-24 16:51:37 发布

宇智波波奶茶

最新推荐文章于 2024-07-24 16:51:37 发布

阅读量208

点赞数 1

分类专栏： html 小白入门文章标签： html

本文链接：https://blog.csdn.net/layonly/article/details/120066740

版权

小白入门同时被 2 个专栏收录

39 篇文章 2 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

本文详细解读了HTML的基本组成单位，如标签、结构、排版、文本和列表等，同时介绍了CSS用于美化和JavaScript实现动态交互的重要性。了解浏览器工作原理，比较B/S和C/S模式，并展示了图片、超链接、表格等元素的使用方法。

摘要由CSDN通过智能技术生成

1.什么是浏览器

浏览器是显示一个网页的

一个网页由什么组成：html css javascript

谷歌浏览器，火狐浏览器

ie uc 360 猎豹百度欧朋 2345 safari

【ps】谷歌浏览器，或者火狐浏览器。可以用作代码的调试哦

把一个网页比作一个美女。

html是没有化妆，是一个素颜的女的而且不会动。

css 就是给这个素颜女的化妆。让她变得好看点。

javascript 就是让这个女的动起来！！！动态的效果。

最后共同组成咱们大家见到的网页，可以看到十分好看的

2.什么是html

超文本标记语言（Hyper Text Markup Language）

不但可以放文字，还可以放图片，音频，视频等，超文本，超过文本的范畴。

一个网站里面，不但可以有文字，还可以有图片，音频，视频等

html 所见即所得，非常简单

3.两种模式【重点】

B/S:（Browser/Server）

浏览器/服务器模式

只需要一个浏览器，并且知道这个网站的网址。通过网址可以访问网站，比如网页版的QQ,网页版的微信，网页版的淘宝，网页版的京东

C/S:(Client/Server)

客户端/服务器模式

就是咱们安装的软件，电脑上面安装一个360，QQ,或者手机上面安装了微信

安装淘宝安装京东这些软件都被称为了客户端服务器模式

大家可以想一个问题：

针对客户而言：B/S模式好，还是C/S模式好？C/S好

针对程序要而言：B/S 好。

因为如果是C/S的话，要考虑平台，比如我是windows,ios, andriod,平板和手机又不一样

所以在开发的时候，开发很多版本的应用软件。

但是如果B/S模式，只需要开发一版就可以了。在开发的时候可以屏幕自适应

4.html基本组成单位是什么?

一个网页是由html, css, javascript组成的

html最基本的组成单位是标签。

标签：是组成html的最小的基本单位。

标签的语法格式：

双边标签：<标签名属性1=“属性值1” 属性2=“属性值2”></标签名字>

单标标签：<标签名字属性1=“属性值1” 属性2=“属性值2”/>

开发工具的话推荐大家使用HBuilder

https://www.w3school.com.cn/html/html_lists.asp

学习html的官方手册

<!-- 注释 -->
<!-- 写一个双边标签  html都是官方定义好的，你自己不能胡乱写
 一个标签就是一个功能
 -->
<marquee  direction="right">这个是一个简单的双边标签</marquee>
<!-- b标签的功能加粗 -->
<b>这个是另外一个简单的标签</b>
<!-- 单标标签 -->
<!-- hr标签的功能是一个分割线 -->
<hr />

下面开始系统的学习各种标签，咱们刚才说了，一个标签就是一个功能

4.1结构标签

结构标签是组成网页最基本的固定的格式

【注意】：以后在写网页的时候，都要写结构标签

<html>
    <!-- 快捷键  ctrl + ?  注释 -->
    <!-- 最外层的标签 html  双边标签
     在html标签中又写了两个标签，一个head（头）  一个body（身体）
     其中  head标签和body标签是html的子标签
     -->
    <head>
        <!-- 设置当前页面的编码格式  charset是标签meta的属性   utf-8是属性值 -->
        <meta charset="utf-8"/>
        <!-- title是一个双边标签，在浏览器的头部显示内容 -->
        <title>百度一下,你就知道了</title>
    </head>
    <body>
        所见即所得
    </body>
    <!-- 1.html标签都是<>括起来的，分为单边标签和双边标签 -->
    <!-- 2.html是不区分大小写的，但是一般建议小写 -->
    <!-- 3.标签一定要记功能 -->
    <!-- 4.标签是可以带属性的，一般标签的属性值是用双引号引起来的。注意等号两边不加空格 -->
    <!-- 5.标签是可以嵌套的，我在嵌套写的时候缩进写法，让代码具有很强的可读性 -->
    
</html>

4.2排版标签

1.换行标签 br 单边标签

2.分割线标签 hr 单边标签

3.段落标签 p 双边标签

<!-- 结构标签已经全部写好了 -->
<html>
    <head>
        <meta charset="utf-8">
        <title>排版标签</title>
    </head>
    <body>
        <!-- br 标签是单边标签，  功能是换行 -->
        后宫佳丽三千人<br/>
        从此君王不早朝
        <!-- hr  标签单边标签， 功能是打印一个分割线 -->
        <hr/>
        <!-- p标签 是双边标签  具有段落的特效  单独成为一段，而且段与段之间有留白-->
        <p>“少年强则国强,少年独立则国独立……”南昌市二十八中青云校区的学生在梅汝璈故居激情诵读《少年中国说》,学校开展以爱国教育为主题的新时代文明实践活动郑</p>
        <p>“少年强则国强,少年独立则国独立……”南昌市二十八中青云校区的学生在梅汝璈故居激情诵读《少年中国说》,学校开展以爱国教育为主题的新时代文明实践活动郑</p>
        <p>“少年强则国强,少年独立则国独立……”南昌市二十八中青云校区的学生在梅汝璈故居激情诵读《少年中国说》,学校开展以爱国教育为主题的新时代文明实践活动郑</p>
        
    </body>
</html>

4.3文本标签

标题标签：h1-h6 双边标签

文本标签：font 双边标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>
    <body>
        <!-- 标题标签 h1~h6  逐渐变小  就是几级标签 word文档-->
        <h1>烤肾脏</h1>
        <h2>卤猪蹄</h2>
        <h3>小野鸡炖野蘑菇，吃完以后躺板板</h3>
        <h4>烤山鸡</h4>
        <h5>烤骆驼</h5>
        <h6>烤全羊</h6>
        <!-- 即使你写了一个错误的标签，发现没有报错，只是没有效果而已，标签的容错率相当强，但是也要写正确的 -->
        <h7>和就撒建</h7><br/>
        西出阳关无故人
        <!-- 标签是可以加属性的！！！ -->
        <!-- color这个属性设置颜色的  属性值是 英文的颜色的表示形式
            size这个属性设置字体的大小的  1~7
            face这个属性 设置字体的样式  比如 楷体 宋体  微软雅黑等
         -->
        <font color="tomato" size="5" face="楷体">西出阳关无故人</font>
        <!-- 标签是可以相互嵌套的 -->
        <h1><font color="red">今天中午吃肉肉</font></h1>
        <h1 >蹦起来凿死你</h1>
        <!-- 想写重复的代码  h2*6 按tab键 -->
        <div></div>
        <div></div>
        <div></div>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
    </body>
</html>

4.3列表标签

1.无序列表

ul和li标签同时使用其中li标签是ul标签的子标签
<ul>
    
</ul>
2.有序列表

ol和li标签同时使用其中li标签是ol标签的子标签

3.自定义列表【几乎不用】

dl标签和dd同时使用，dd是dl的子标签

dt也是dl的子标签不过dt是标题 dd才是内容

<div>
		 	<ul type="circle">
		 		<li>奶茶
				<ol type="1">
					<li>焦糖玛奇朵</li>
					<li>教堂珍珠</li>
					<li>奶茶三兄弟</li>
				</ol></li>
		 		<li>咖啡
				<ol type="I">
					<li>丝滑拿铁</li>
					<li>北美咖啡</li>
				</ol>
				</li>
		 		<li>冰淇淋
				<ol type="A">
					<li>奥利奥口味</li>
					<li>草莓口味</li>
					<li>芒果口味</li>
				</ol></li>
		 	</ul>
			<dl>
				<li>我是自定义列表</li>
				<li>呵呵哒</li>
			</dl>
		 </div>

4.4块标签和行标签【重要】

被称为无意义的标签，但是很有用！！！

因为以后学完css和js以后咱们可以结合css和js一起使用

div 双边标签，单独成一块

span 双边标签单独成一行

footer

header

<div>
		 	我是块标签1
		 </div>
		 <div>
		 	我是块标签2
		 </div>
		 <div>
		 	我是块标签3
		 </div>
		 <span>我是行标签1</span>
		 <span>我是行标签2</span>
		 <span>我是行标签3</span>

4.5图片标签

在一个网站里面可放图片的，你们知道的好的图片网站有哪些，能不能给我推荐一下

img 单边标签在网页中显示图片的

有一些属性：

src:属性值是放的图片的地址（可以是相对地址，绝对地址，网络地址都可以的！）

src属性特别重要，牵涉到图片的资源

width:设置图片的宽度单位是像素 px

height:设置图片的高度单位是像素 px

宽和高只设置一个的时候，会等比缩放比如原图是宽1000px 高400px

只设置一个宽200px，那么他的高会自动变为 80px

alt:图片的文本描述，当图片加载失败的时候显示该信息，如果图片加载成功就不显示此信息

title：当鼠标移动到这个图片上面的时候。鼠标会显示该信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body>
		<img src="1.jpg" width="400" title="你相信光吗" alt="图片加载失败">
	</body>
</html>

4.6超链接标签

链接标签，可以点击的，点击以后可以跳转到另外一个页面的

双边标签 a标签

属性：

href:对应a标签的地址，可以本地地址，也可以是网络地址

target:打开目标网页的方式

属性值：_self 本窗体打开（默认的） _blank 新开一个窗体打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!-- a 标签是页面之间的跳转的  本地资源 -->
		<!-- <a href="4文本标签.html">点我啊！！！</a> -->
		<a href="http://www.baidu.com" target="_blank">跳转到百度页面</a>
	</body>
</html>

4.7基于超链接锚点功能的实现【以后会用！！！】

使用a 标签很快定位到咱们一个页面的某一个位置！！！

给一个a标签命名

在需要使用锚点的地方再写一下a标签，href=#锚点名字

4.8表格标签

table 双边标签

嵌套一些标签

tr标签双边标签控制行，他是table的子标签

td标签双边标签控制列的，他是tr的子标签 caption :表头标签，是table的子标签

th标签：和td非常相似，是tr子标签，但是比td标签的颜色深一点，字体粗一点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<div id="asc">
			<table border="5" cellspacing="0" cellpadding="10" width="50%" align="center" bgcolor="aquamarine" bordercolor="red">
				<tr align="center">
					<th>ID</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
				<tr align="center">
					<td>1</td>
					<td>张三</td>
					<td>21</td>
				</tr>
				<tr align="center">
					<td>2</td>
					<td>撒旦是</td>
					<td>2500</td>
				</tr>
				<tr align="center">
					<td>3</td>
					<td>瓦格博</td>
					<td>270</td>
				</tr>
			</table>
		</div>
	</body>
</html>

4.9文本话格式标签

b 加粗标签

big 定义大号字体的标签

em 斜体字体

i 斜体字体

small 小号字体

strong 加粗字体 sup 定义上标

sub 定义下标

ins 定义插入字体

del 定义删除字体

4.10字符实体

特殊的符号在html里面是没有办法显示的，只能使用字符实体来体现

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entitie)

用到哪个就查看官方手册就可以了

4.11表单标签【重要！！！】开发必用！！！

登录，注册输入框都是表单标签

form 双边标签

form 有一个子标签是input标签

input标签是一个单边标签

from标签和input标签主要干嘛的？

使用来提交数据的，这个通过input输入框给别的页面提交数据的！！！

url:是一个网址，统一资源定位符

一个网址就是一个资源，比如www.baidu.com这就是一个资源。是通过这个网址找到百度的页面。下载电影，迅雷下载，给你一个网址。通过这个网址进行下载这个电影资源。

url组成部分：

协议+域名(ip)+端口号+文件+参数

http://www.baidu.com:80/index.html?username=goudan&password=123456

参数：是问号后面的东西，这个就是input输入框中向另一个页面带过去的数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单标签</title>
    </head>
    <body>
        <!-- form标签属性
            action:提交数据到哪？是一个网址  http://127.0.0.1:8848/code/test.html?username=admin&password=111111
            method:提交方式
                默认的是get的提交方式
                有两种方式：get  post
                get:(开发中查询)
                    1.不安全  所以不用登陆注册  密码是url直接显示了
                    2.传输效率高，所以才查询
                    3.通过get请求方式查看到你的信息
                    4.在url中可以看到咱们的参数
                    
                    5.传输的数据是有限制的在url  2kb左右
                    
                post:(开发中增删改)
                    1.假装很安全
                    2.传输慢
                    3.数据大小没有限制
                    4.在地址栏中看不到传输的数据，但是程序员可以看到
            method="post" enctype="multipart/form-data"
            上传文件所必须两个重要的属性，为什么要多写，文件流有关系，平常字符串，
            现在文件是流multipart多个表单数据
         -->
        <form action="test.html" method="get" <!-- enctype="multipart/form-data -->">
            <!-- input属性
             type:决定了输入框的样式
                属性值：很多
                    text 明文
                    password  密文
                    submit  提交按钮
            value:值
            name:一定要写，如果不写的话，就无法提交数据到另外一个页面！！！
            
             -->
            姓名:<input type="text" name="username"/><br>
            <!-- 密码是用******来代替的  密文的  怎么来做的？ -->
            密码:<input type="password" name="password"/><br>
            <!-- 默认是提交这两个字，但是加上value属性以后，就会变成你自定义的按钮 -->
            
            <!-- 单选框  radio
            加完name属性以后，咱们只能单选。
            如果不写value的话的，就无法判断传给另外一个页面的值
            -->
            <input type="radio" name="sex" value="男"/>男
            
            <input type="radio" name="sex" value="女"/>女<br>
            
            <!-- 复选框  checkbox
            name  和value的值不能少！！！因为传给另外一个页面
            -->
            <input type="checkbox" name="hobby" value="跳">跳舞
            <input type="checkbox" name="hobby" value="rap">rap
            <input type="checkbox" name="hobby" value="唱">唱歌
            <input type="checkbox" name="hobby" value="篮球">篮球
            <br>
            <!-- 日期文本框 date -->
            <input type="date" name="birth"/><br>
            <input type="datetime" name="datetime"/><br>
            
            <!-- 上传文件  file
            有一些注意事项
            上传文件的时候，必须使用post请求，form表单还有一个属性
            enctype="muiltipart/fromdata"  这两个缺一不可
            -->
            <input  type="file" name="file"/><br>
            <!-- 隐藏文本  hidden，开发用！！！
             不会在咱们页面显示，但是可以通过name属性和value属性 带数据带另外一个页面
             -->
            <input type="hidden" name="hid" value="sb"/>
            <br>
            <!-- 下拉列表 
            两个标签组成的，一个select标签 另外一个是子标签option
            name属性必须得写
            -->
            <select name="city" size="6">
                <option value="0371">郑州</option>
                <option value="0372">开封</option>
                <option value="0377">洛阳</option>
            </select><br>
            <!-- 文本编辑器 以后会有封装好的 -->
            <textarea name="info">
                
            </textarea><br>
            <!-- 重置按钮   可以恢复到以前没有数据的状态-->
            <input  type="reset" value="重置"/>
            <input type="submit" value="登录"/>
        </form>
        <!-- 前端的东西  要会复制，不用自己写，但是你必须得读懂别人的代码！！！ -->
    </body>
</html>

1.2framset标签【重要】

一个页面再套一个页面

【注意事项】：如果一使用了framset就不能使用body标签了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>framset</title>
    </head>
    <!-- 用了framset就不能使用body了 -->
    <!-- 
     framset有两个属性
        rows:把一个网页分成上下份
        cols:把一个网页左右份
        noresize  禁止页面拖动
     -->
    <frameset cols="200px, *" noresize>
        <frame src="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang">
        <frameset rows="200px , *">
            <frame  src="test.html"/>
            <frame src="1表单标签.html"/>
        </frameset>
    </frameset>
</html>