Html

最新推荐文章于 2022-12-23 18:30:13 发布

ヾ张先生°

最新推荐文章于 2022-12-23 18:30:13 发布

阅读量250

点赞数

分类专栏：笔记文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_48064509/article/details/107568478

版权

笔记专栏收录该内容

19 篇文章 6 订阅

订阅专栏

这里写目录标题

Html

Html

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

文本标签

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

列表标签

无序列表: ul和li

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

有序列表: ol和li

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下:

1.Coffee
2.Milk

图片标签img

src路径:
1.相对路径:访问站内资源使用
图片和页面同一目录: 直接写图片名
图片在页面的上级目录: . ./. ./图片名
图片在页面的下级目录: 文件夹名/图片名
2.绝对路径:访问站外资源时使用,称为图片盗链,但是有可能找不到图片
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>

实体引用(特殊字符)

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

表单: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>