Web前端-01

最新推荐文章于 2024-05-09 21:50:39 发布

小范的一天

最新推荐文章于 2024-05-09 21:50:39 发布

阅读量155

点赞数

分类专栏： web前端文章标签： web html

本文链接：https://blog.csdn.net/qq_43574317/article/details/107071759

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

web前端

课程介绍

课程介绍

web前端(学习如何开发网站页面)
数据库(学习如何对数据进行增删改查操作)
Servlet(学习如何获取用户请求以及如何对该请求进行响应)
vrd项目

web前端

HTML (学习如何搭建页面结构和内容)
CSS(学习如何美化页面)
JavaScript (学习如何给页面添加动态的效果)
jQuery 这是一个JavaScript语言框架, 作用是简化JavaScript代码
Bootstrap 前端页面的综合框架, 作用:让前端页面开发变得更高效

HTML

Hyper Text Markup Language: 超文本标记语言
超文本: 不仅仅是纯文本, 还包括字体相关以及多媒体内容(图片/音频/视频)
XML也是标记语言 , 区别就是 XML是可扩展标记语言, HTML里面的标签是预设好的,学习HTML实际上就是学习有哪些HTML标签以及标签和标签之间的关系
创建第一个HTML页面

<!DOCTYPE html> 文档声明:告诉浏览器使用html的哪个版本解析页面
  <html> 跟标签
      <head> 头标签: 给浏览器看的内容在头标签里面
          <meta charset="UTF-8"> 设置字符集
          <title>Insert title here</title> 页面标题 
      </head>
      <body>体标签: 给用户看的内容写在体标签内
  
      </body>
  </html>

内容标题h1-h6
特点: 独占一行,自带上下间距,字体加粗,字体大小不同
水平分割线 hr
段落标签p
特点: 独占一行,自带上下间距
换行br
在html中不能识别回车,回车只能识别成空格,如果需要换行使用br标签
加粗b 斜体i 删除线s 下划线u 小字small

列表标签

无序列表 ul和li

 <ul type="circle"><!-- unordered list -->
  	<li>刘备</li><!-- list item列表 项 -->
  	<li>关羽</li>
  	<li>孙尚香</li>
  	<li>诸葛亮</li>
  	<li>刘禅</li>
  </ul>

有序列表 ol和li

  <ol type="1" start="10" reversed="reversed"> 
  	<li>Java基础</li>
  	<li>API</li>
  	<li>Web前端</li>
  	<li>数据库</li>
  </ol>

列表嵌套: 有序列表和无序列表可以任意无限嵌套

  <ol>
  	<li>凉菜
  		<ul>
  			<li>拍黄瓜</li>
  			<li>东北大拉皮</li>
  			<li>花毛一体</li>
  		</ul>
  	</li>
  	<li>炒菜
  		<ul>
  			<li>西红柿炒鸡蛋</li>
  			<li>溜肥肠</li>
  			<li>鱼香肉丝</li>
  		</ul>
  	</li>
  	<li>酒水</li>
  </ol>

图片标签img

src路径:
- 相对路径:访问站内资源使用
  - 图片和页面同一目录: 直接写图片名
  - 图片在页面的上级目录: …/…/图片名
  - 图片在页面的下级目录: 文件夹名/图片名
- 绝对路径: 访问站外资源时使用, 称为图片盗链, 节省本站资源,但是有可能找不到图片
- alt: 图片不能正常显示时显示的文本
- title: 鼠标在图片上停止移动时显示的文本
- width/height: 设置宽高两种方式:1. 像素 2. 上级元素百分比如果只设置宽度高度会自动等比例缩放

超链接a

如果超链接不写href属性则就是纯文本效果
href类似于img标签的src属性资源路径, 如果指向的路径浏览器支持浏览则直接浏览如果不支持则下载
图片超链接: a标签包裹文本就是文本超链接包裹图片就是图片超链接
实现页面内部跳转: 在目的地位置的元素中添加id 然后在点击的超链接里面添加 href="#xxx" 即可跳转到id对应元素的位置
target="_blank" 在新窗口中打开页面 , 默认是从当前窗口跳转到新页面

表格标签table

标签: table表格 tr行 td列 th表头 caption表格标题
属性: table(border边框 cellspacing单元格间距 cellpadding单元格内边距) td(colspan跨列 rowspan跨行)

分区标签

可以把分区标签理解成是一个容器,作用就是将多个有相关性的标签放在同一个分区标签中, 便于统一管理
常见的分区标签有div和span
- div: 块级分区元素: 独占一行
- span:行内分区元素: 共占一行
如何对页面进行分区? 页面至少分为三大区,每个大区里面有多个小的分区
```
	<div>头</div>
	<div>正文</div>
	<div>脚</div>
```
html5标准中根据分区的作用新增了一些分区元素, 目的是为了提高代码的可读性,包括:header/article/section/footer/nav导航区域

<header>头</header>
    	<article>正文</article>  <section></section>
    	<footer>脚</footer>

表单form

表单作用: 获取用户输入的各种信息,并将信息提交给服务器
学习表单主要学习的就是表单中的各种控件,控件包括:文本框,密码框,单选,多选,下拉选等
各种控件:

<form action="https://www.baidu.com/">
  	<!-- type是控件的类型  
  	name所有控件都必须写提交数据时的参数名  
  	placeholder: 占位文本
  	value: 文本框的值
  	readonly: 只读
  	--> 
  		用户名:<input type="text" name="username" 
  			placeholder="请输入用户名" 
  			value="abc" readonly="readonly"><br>
  			<!-- 密码框和文本框属性通用 -->
  		密码:<input type="password" name="password" 
  		placeholder="请输入密码 "><br> 
  		<!-- 单选和多选必须写value属性
  		checked 默认选中 -->
  		性别:<input type="radio" name="gender" 
  			value="m" id="r1" ><label for="r1">男</label> 
  		<input type="radio" name="gender" 
  		value="f" id="r2" checked="checked">
  		<label for="r2">女</label><br>
  		<!-- 多选和单选属性通用 -->
  		爱好:<input type="checkbox" name="hobby" 
  		value="cy">抽烟
  		<input type="checkbox" name="hobby" 
  		value="hj" checked="checked">喝酒
  		<input type="checkbox" name="hobby" 
  		value="tt">烫头<br>
  		<!-- 日期选择器 -->
  		生日:<input type="date" name="birthday"><br> 
  		<!-- 文件选择器 -->
  		靓照:<input type="file" name="pic"><br>
  		<!-- 文本域 rows行 cols列 -->
  		自我介绍:<textarea 
  		rows="3" cols="30" name="intro"
  		placeholder="说点儿啥..."></textarea><br>
  		<!-- 下拉选  selected默认选中-->
  		所在城市:
  		<select name="city">
  			<option>请选择</option>	
  			<option value="bj">北京</option>	
  			<option selected="selected" value="sh">上海</option>	
  			<option value="gz">广州</option>	
  		</select><br>
  		
  		<!-- 提交按钮 -->
  		<input type="submit" value="注册">
  		<!-- 重置按钮 -->
  		<input type="reset" > 
  		<!-- 自定义按钮 -->
  		<input type="button" value="自定义按钮">
  	</form>

实体引用(特殊字符)

空格: 如果html页面中连续出现多个空格,只能识别一个这称为空格折叠现象,
小于号和大于号: < 和 >

小范的一天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端-01

web前端课程介绍web前端HTML标签文本相关标签列表标签图片标签img超链接a表格标签table分区标签表单form实体引用(特殊字符)课程介绍web前端(学习如何开发网站页面)数据库(学习如何对数据进行增删改查操作)Servlet(学习如何获取用户请求以及如何对该请求进行响应)vrd项目web前端HTML (学习如何搭建页面结构和内容)CSS(学习如何美化页面)JavaScript (学习如何给页面添加动态的效果)jQuery 这是一个JavaScript语言框架, 作用是简
复制链接

扫一扫