学习web前端之html第一天

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量208 收藏
点赞数
分类专栏： html 文章标签： web前端学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysn121101/article/details/97884761
版权

这里写自定义目录标题

html介绍

html是超文本标记语言，html 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素。

B/S架构

B为浏览器，S为服务器

网络概念

Http：超文本传输协议
url：统一资源定位符

浏览器搜索框可以输入以下两种格式：

  1. http://www.baidu.com/index.html
  2. http://ip:port/path
    例：http://134.175.154.93:80/basic/start.html
    主机ip：134.175.154.93
    端口号port: 80
    资源路径path: /basic/start.html

html网页

开发流程

  1. 编写网页 （文本编辑工具sublime/vscode）
  2. 本地测试
  3. 部署（linux）将本地的html网页上传至云服务器上，并且部署到apache静态服务器上
  4. 网络测试
    http://xxx.xxx.xxx.xx/helloworld.html

结构

  • doctype 声明部分
  • html

    • head 不会显示到浏览器视口中

      • title 显示在浏览器选项卡
      • meta 用于设置元信息,配置
        • charset=utf-8 编辑器 UTF-8

    • body 网页主体

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

属性

在开始标签中可以添加属性
<div 属性名=属性值 属性名=属性值>
属性名不区分大小写

<div id="one"></div>
<div ID="one"></div>

核心属性

（绝大多数标签都可以应用的属性）
id 文档内部的唯一标识
class 类

   <div class="first one">one</div>

title 描述
style 样式，取值为css规则：键值对，键值之间通过冒号分 割，规则之间通过分号分割

<div id='one' style="color:#333;backgroud:#ededed"></div>

特有属性

  • a
    • href
    • target
  • img
    • src
    • alt
      …

h5拓展属性

data-xxx

 <div data-nn='one'></div>

元素

块元素

作用：作为页面框架，或者容器。是页面的主体
特性：

1.独占一行空间
2.默认宽度为100%，默认高度由子元素或者内容决定
3.可以为其指定宽高

div 无意义的块元素（无招）
h1~h3 标题

本身具有的样式：
font-size 字体大小
font-weight 字体加粗
margin 外边距

p 段落

本身具有的样式：
margin 外边距

ul、li 无序列表，列表项

本身具有的样式：
ul有：
margin 外边距
padding 内边距
list-style 列表样式

ol、li 有序列表，列表项

本身具有的样式：
ol有：
margin 外边距
padding 内边距
list-style 列表样式

dl、dt、dd 有序列表

本身具有的样式：
dl、dd有：
margin 外边距

H5新增的块元素（语义化标签）

header(头)
nav
article（主体）
section (部分)
footer（脚）
aside

行内元素

作用：点缀网页，填充内容
特性：

  1. 与其他行内元素共享一行空间
  2. 默认宽高由内容决定
  3. 不能为其指定宽和高
  4. 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

span 无意义的行内元素
a 超级链接（axure open link）

默认样式
color 字体颜色
text-decoration 下划线
cursor 光标
默认事件（js - dom） 点击事件

  • href
    • url
      • 相对路径
      • 绝对路径
  • target

img

  • src 图片地址
    • url
      • 相对路径
      • 绝对路径
      • base64格式的数据
  • alt 图片找不到的时候文本替换

功能元素

属于行内元素

  1. 表格table
    【属性】border、width…
    【td、th属性】colspan、rowspan、width、align…
    td、th可以放任何子元素
<table>
	  <!-- 表格标题 -->
      <caption>学生信息表</caption>
      <!-- 表头 -->
      <thead>
      	<tr>
      		<th></th>
      		<th></th>
      		<th></th>
      	</tr>
      </thead>
      <!--表主体，不可省略  -->
      <tbody>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      </tbody>
      <!-- 表尾 -->
      <tfoot>
      	<tr>
      		<td></td>
      	</tr>
      </tfoot>
	</table>

【注意】：每一行中的列数应该是相等

  1. 表单form（前后台交互）
    用户 -> 表单 -> 后台 -> 数据库

form属性：

  • action 后台接口地址
  • method 请求方式

get
参数拼接在url后面，通过?来分割
传递参数较少
用于查询学生信息、通过id删除学生信息、
post
参数存放在请求体中，安全
传递参数更多
用于保存或者更新学生信息、批量删除

  • enctype 编码方式
  1. enctype=‘application/x-www-form-urlencoded’
    浏览器就会将参数转换为【查询字符串 qs】格式

username=charles&password=123321&nickname=李四&emailcharles@briup.com

  1. multipart/form-data
    当有附件在表单中的时候，enctype务必设置为这种格式

  2. ajax查询字符串
    username=charles&password=123321&nickname=李四&emailcharles@briup.com

JSON ‘{“username”:“charles”,“password”:“123321”}’

form可以有哪些内容
1.input的属性

  • name: 不能省略，作为参数中的key
  • value: 作为参数中的value,在按钮中务必指定value值
  • type:

type=" ";
text 单行文本框
password 密码框
submit 提交按钮
file 附件选择器
radio 单选按钮
checkbox 复选按钮

h5拓展(兼容性，功能)

email
date
number
…
progress 进度条

  • checked: 单值属性 默认选址
  • placeholder 提示语

2.select的属性
option
标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本

<option value="sx">山西</option>     	sx
<option>山西</option> 					 山西

3.textarea的属性（多行文本域）

  • placeholder 提示语

4.第三方库
日期插件
地址选择器地址
附件上传
富文本

思维导图

html思维导图

牛刀小试

课表展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>课表</title>
	<style>
	body{
		margin:0px;
	}
	table{
		margin: 50px 180px;
		text-align: center;
		border-collapse: collapse;
		font-family: 楷体;
		
	}
	table th,td{
		width:100px;
		height: 40px;

	}
	table th{	
		font-size: 17px;
		font-weight: bolder;
	}
    </style>
</head>
<body>
	<table border="1">		
		<thead>
			<tr>
				<th colspan="2"></th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">上午</td>
				<td>9:00-10:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>	
				<td>11:00-11:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="9" align="center">中午(11:30-14:00)</td>		
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>14:00-16:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>	
				<td>17:00-17:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="9" align="center">休息</td>	
			</tr>
			<tr>
				<td>晚上</td>
				<td>19:30-21:00</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

个人简历

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人简历</title>
	<style>
	body{
		margin: 0px;
	}
	table{
		width: 500px;
		border-collapse: collapse;
		/*使表格居中*/
		margin: 50px auto;
		border-color: #ccc;
	}
	table th,td{
		width: 80px;
		height: 35px;
	}
    table th{
    	background-color: #87C3DD;
    	color: #fff;
    	font-weight:bolder;
    	font:18px 微软雅黑;

    }
    .captive,.description{
    	height: 100px;
    	/*使表格中文字置顶*/
    	vertical-align: top;
    }
    .title{
    	
    	font:13px 微软雅黑;
    	width: 50px;
    }
    .name{
    	font:13px 微软雅黑;
    	text-align: center;
    	background-color: #EFCEC5;
    	height: 25px;
    }
    .content{
    	font:13px 楷体;
    	text-align: center; 
    }
      li{
     	margin:0px;
     	font:13px 楷体;
    }
    p{
    	margin:5px;
     	font:13px 楷体;
     	text-indent: 2em;
    }
    img{
    	width:60%;
    	height: 70px;
    	margin: 0px 28px;
    	margin-bottom: 0px;	
    }
   </style>
</head>
<body>
	<div>
		<table border="1">
			<thead>
				<tr>
					<th colspan="4">个人简历</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="4"  class="name">基本信息</td>
				</tr>
				<tr>
					<td class="title">姓名</td>
					<td colspan="2" class="content">小红</td>
					<td rowspan="2">
						<img src="1.jpg" alt="">
					</td>
				</tr>
			    <tr>
					<td class="title">毕业院校</td>
					<td colspan="2" class="content">xxxxx</td>
				</tr>
				<tr>
					<td class="title">性别</td>
					<td class="content">女</td>
					<td class="title">生日</td>
					<td class="content">xxxx-xx-xx</td>
				</tr>
				<tr>
					<td class="title">学历</td>
					<td class="content">本科</td>
					<td class="title">专业</td>
					<td class="content">计算机科学与技术</td>
				</tr>
				<tr>
					<td class="title">外语水平</td>
					<td class="content" >xx</td>
					<td class="title">联系方式</td>
				    <td class="content">xxxxxxxxx</td>
				</tr>
				<tr>
					<td class="title">籍贯</td>
					<td colspan="3" class="content">xxxxxxxxxxxxx</td>
				</tr>
				<tr>
					<td colspan="4"  class="name">职业技能</td>
				</tr>
				<tr>
					<td colspan="4" class="captive">
						<ol>
							<li>画画</li>
							<li>唱歌</li>
							<li>跳舞</li>
						</ol>
					</td>
				</tr>
				<tr>
					<td colspan="4"  class="name">项目经验</td>
				</tr>
				<tr>
					<td colspan="2" class="title" align="center">智慧校园选课系统</td>
					<td colspan="2" class="title" align="center">2019年1月~2019年6月</td>
				</tr>
				<tr>
					<td colspan="4" class="description">项目描述：
						<p>hhhhh</p>

					</td>
				</tr>
				<tr>
					<td class="title">预览地址</td>
					<td colspan="3" class="content">http://www.bai.com</td>
				</tr>
				<tr>
					<td class="title">github</td>
					<td colspan="3" class="content">xh@1324</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
ysn121101
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学web前端的第一天
weixin_34087307的博客
03-28 116
大家好，我是蓝颜。上次写博客是18年的4月份，不是不想写，是不知道怎么写，求写博客的技巧。从今天开始一天一更，不管写的怎么样，坚持的写下去。闲话不多说，第一次接触前端，什么都不懂，因为对这玩意的热爱，我越来越喜欢它了。 第一次学老师只写了个格式：<html> 　　　　　　　　　　　　　　<head>头部（等于网页的标题）</head> 　　　　　　　　　　...
web前端课程第一天
cj460253216的博客
02-20 319
今天是学习web前端的第一天。 首先了解了学习大纲，知道了html是结构层，CSS是样式层，JS是行为层之后要学习1：html+css   2 ：javascrcpt+javery 3：框架：Bootstap+angularys HTML是超文本标记语言 其次是uft-8编码，html的历史以及 html的标签分双闭合标签和单闭合标签。 ,→hs 浏览器声明 声明编码格式 引用文件
WEB前端学习第一天
QSCRCSDN的博客
09-02 256
介绍： 1.搭建网页的结构：html5.0 2.对页面的页面元素进行修饰，比如定位等。表现（CSS） 3.和页面的元素进行交互。行为（javascript,jQuery） 4.BootStrap(前段框架)—响应式布局 1、 文件夹、文件命名规则：由英文字母、数字、下划线共同组成，数字不能开头，不能使用汉字作为文件名 我们书写标签的时候尽量以严格的方式来书写 1）有结束标签的必须加结束标签 2）标...
web前端学习第一天
Viktor的专栏
11-05 281
一、 web应用程序开发介绍 1. 界面部份 2. 业务逻辑部份 3. 数据存储部份 二、 web应用程序开发三大核心技术 HTML CSS JAVASCRIPT html: 超文本标记语言 作用: 网页内容、结构 css : 级联样式表 ...
学习YUI.Ext基础第一天
10-31
在《学习YUI.Ext基础第一天》这篇文章中，作者回顾了过去对于Web开发技术的看法与实践经验，特别是关于JavaScript及其在构建现代Web应用中的作用。文章通过两个帖子的摘录，深入探讨了JavaScript的重要性以及它在...
html学习笔记第一天总结.pdf
10-11
HTML，全称Hyper Text Markup Language，即超...总的来说，HTML学习的第一天主要涵盖了网页的基础知识，HTML的结构和语法，以及Web标准和浏览器的重要性。理解这些基础概念对于后续深入学习HTML5和前端开发至关重要。
黑马前端第一天资料
01-02
"黑马前端第一天资料"提供的是入门级别的学习资源，适合初学者系统地了解和掌握前端开发的基础知识。以下将详细阐述HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）这两个核心概念。 HTML是网页...
斑码教育大前端笔记-HTML第二天
10-09
在第一天的学习中，我们可能已经了解了HTML的基本语法和元素，如HTML文档的基本结构（<!DOCTYPE html>、<html>、、），以及如何创建标题（到）、段落（）和文本格式化标签（、、、）。第二天的内容可能会进一步深入...
斑码教育大前端课堂笔记-html第四天
10-11
在斑码教育的前端课程中，HTML第四天的学习内容主要集中在深化HTML基础知识，以及引入一些进阶概念。HTML（HyperText Markup Language）是构建网页内容的基本语言，它通过标签来定义页面结构和样式。本笔记涵盖了...
web前端学习之路-第一天
lbqcsdn的专栏
05-25 365
本人做了几年的Android开发，最近接手的项目里面，大多数界面都是加载的网页，为了能够更好的接手项目，同时也让自己能够多学一些，所以准备自学一些web前端的知识。 学前调研 因为自己也不算新手了，所以在IDE的选择上，我还是准备用比较成熟的，这里我选择的是VScode，如果是小白的话，建议用记事本或者其他编辑器。之所以选择VScode，是因为项目中用到了，同时我也查了关于这个IDE的资料...
B/S架构与C/S架构的区别
weixin_34413802的博客
07-09 138
一、简介 B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。 C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机，并采用...
第一天学习html的总结
weixin_43760983的博客
11-21 237
第一天学习html的总结@TOC 首次接触html5的介绍 从毕业之后一直都接触的设计相关的东西，最近闲来无事，想要学习一下web前端的基础，毕竟自己的工作和前端开发有着密切的联系。 首先先介绍一下自己的情况，在看了我的情况之后，我想想要学习代码类的童鞋们都会对自己有信心了。我毕业于四川师范大学，专业是资源环境与城乡规划管理，不知道这个专业的可以直接理解我是学地理的，因为我们这个专业是归属到地理学...
程序员到到底能干什么大事
吉的专栏
01-08 476
把所有的html标签和语法都看了一遍tmd看着看着我都快睡着了，好困
我的web前端工作日记2------web前端工作的一天
热门推荐
dreamer_sen的博客
08-28 2万+
转载请注明出处：https://blog.csdn.net/dreamer_sen/article/details/82144382 web前端工作的一天 ------------------------------------------------------------------------------------------------------------------------...
Web前端第一天学习的心得
百灵鸟的博客
05-03 3048
1、首选，今天总用时一个下午都在看链接里面的知识，学习的目的就是想了解前端Web开发是做什么用的？基本已经达成；2、了解到了学习Web前端开发必须要学的是HTML+CSS+JavaScript，HTML就是结构（展示在浏览上）、CSS是表现（设置样式）、JS行为（执行事件、获取数据）；3、另外，了解到的有在地址栏输入域名，敲回车键发生了什么？请看图点击这个链接https://pic1.zhimg....
Web前端开发技术实训第一天
weixin_40909604的博客
06-17 1902
简易学习了HTML的语句 例如： span 是一个没有任何样式的段落标签 pre 是一个有带格式的p标签,可以保留缩进、换行（用于展示代码） div是没有任何样式的块级元素 用来包裹内容和分割内容 <iframe> 这是一个框架元素，用来显示其他内容 label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验 熟悉CSS的用法 例如： css选择器有5种...
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2712
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
QT5 FTP 客户端 实现多文件下载 上传
最新发布
08-01
QT5 FTP 客户端 实现多文件下载 上传
Web前端技术发展与职业路径
JavaScript作为Web前端的核心语言之一，其简单的语法和强大的功能使其成为前端开发的必备技能。例如，以下的JavaScript代码示例展示了变量的声明和函数的使用： ```javascript vara=true; functiong(){ a=false; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值