html笔记

最新推荐文章于 2022-03-07 09:33:43 发布

Bounty Hunters

最新推荐文章于 2022-03-07 09:33:43 发布

阅读量189

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45212924/article/details/106052317

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前端三大基础语言
前端开发3层:
HTML:结构层语义/结构
CSS 样式层样式
JS 行为层交互行为,动画

上网是什么？
通过浏览器发起HTTP请求，请求服务器上的文件
服务器接收请求后，浏览器开始下载服务器上的文件，图片等资源
刘篮球进行解析渲染最终可以在浏览器中看到的页面内容

代码编辑器
做网页和用什么软件无关没任何纯文本编辑器，都能够制作软件。

HTML简介
超文本标记语言，是网页的文件格式。
维护：由W3C组织维护 https://www.w3school.com.cn/
特点：纯文本标记语言语义化标签HTML通俗的将就是学习标签用法

文字大小调整：按住ctrl+滚轮缩放大小

声明止文档为html 整个页面头部：处理一些信息和资源文件的作用设置字符集，如果没有设置那么就会时乱码 gb2312 中国人定制，有限制 utf-8国际通用的

	供搜索引擎使用==》百度 搜索关键字
	<meta name="keywords" content="教育，项目，作品"/>
	供搜索引擎使用==》百度 搜索描述字段
	<meta name="description" content="卓京教育。。。"/>

	<title>简介</title>页面标签
	<link/> 图标
	<link rel="icon" type="image/x-icon" href="img/HBuilder.png"/>

</head>
<body>

</body>

<!--注释只在代码中课件，浏览器不可见>
	<!--标签书写方式-->
	<!--双标签-->
	<div>这个标签的内容区域</div>

标签对空格、换行、缩进不敏感，无论多少个空格，换行、缩进都会折为一个空格

重用语义化标签 div p ui ol span a img…
div 标签：块级标签俗称盒子
p 标签段落标签块级标签
ul 无序列表标签块级标签
用法:ul的子集只能是li,li的父级只能是ul

ol有序列表块级标签
用法:ol的子集只能是li,li的父级只能是ol
span 行内元素一般不能包裹块级元素

标签的属性都是写在开始标签里面，用空格隔开

实现方式: 百度

百度新窗口打开
默认打开 self 新窗口覆盖自身窗口 blank 打开一个新窗口原来窗口不变

实现方式

#表格最大父级 table 子集行:tr 子集单元格:th/ td # 标签设置的属性: border 设置边框的代销 width设置整个表格的宽度 height设置整个表格的高度 cellspacing 设置表格的外边距 cellpadding 设置表格的内边距 align 设置整个表格的左右对齐方式 #标签设置的属性: height 控制每一行的高度 #

标签设置的属性: width 控制每个单元格的宽度 colspan 合并列X方向的 rowspan 合并行Y方向

#共用的 tr td 属性 : bgcolor 设置背景颜色
align 设置文本的左右对齐方式
valign 设置文本的上下对齐方式

课堂案例:

序号	姓名	年龄	操作
1		3	4
a	b	c	4
e	f	d	h

表单:
#表单
最大父级 form 功能性标签可真实提交数据

input系列的type:
              text 文本输入框 value paaceholder提示信息
              password 密码框
              checkbox 复选框 checked 默认选中 disabled 禁用
              label 标签可实现文本按钮联动
              radio 单算框 name 只要相同才能实现单选
              file 上传文件
              button 单纯的按钮
              submit 提交按钮
              reset 重置按钮
              
              
下拉菜单:select配置子级option
      option 上面的属性:value 提交时的数据
      option 上面的属性 selected属性  默认选中项

文本域:textarea :要用样式去控制大小和阻止用户缩放尺寸

表单课堂案例:

看书睡觉打农药敲代码

    <!--单选框 用name属性控制:值相等-->
    <input type="radio" name="sex"/>男
    <input type="radio" name="sex"/>女
    <input type="radio" name="sex"/>不详
    
    <!--上传文件-->
    <input type="file"/>
    <!--按钮-->
    <input type="button" value="按钮"/>
    <!--提交 按钮 默认有提交两个字-->
    <input type="submit" value="提交"/>
    <!--充值-->
    <input type="reset" value="清空"/>
    
    <!--下拉菜单select配合option-->
    <select>
    	<!--selected属性设置默认项-->
    	<option>--请选择--</option>
    	<option value="长沙">长沙</option>
    	<option value="武汉">武汉</option>
    	<option selected="selected" value="北京">北京</option>
    	<option value="火星">火星</option>
    </select>
    <!--文本域 设置大小-->
    <!--<textarea rows="10" cols="100"></textarea>-->
    <!--用样式去控制到小和阻止缩放-->
    <textarea rows="10" cols="100" style="width: 400px; height: 100px; resize: none;"></textarea>
  </form>
</body>

标签分类：
标准文档流:内容元素从左往右，自上而下排列的
在标准文档流中，把标签分为3类:
块级元素、行内元素、行内块元素
特性:
块级元素:独占一行，可设置宽高，如果不设置宽度将会继承父级100%宽不设置高度将会是内容撑高的高度.
行内元素:不独占一行（可并排）,后面可接同类的元素,不可设置宽高
行内块元素：不独占一行（可并排）,可设宽高
在标准文档流中，搭建页面是很迂腐的（可设置宽高的不能并排，能并排的有不能设置宽高）
很多情况下迫切需要脱离标准文档流（拖标）

Bounty Hunters

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html笔记

前端三大基础语言前端开发3层:HTML:结构层语义/结构CSS 样式层样式JS 行为层交互行为,动画上网是什么？通过浏览器发起HTTP请求，请求服务器上的文件服务器接收请求后，浏览器开始下载服务器上的文件，图片等资源刘篮球进行解析渲染最终可以在浏览器中看到的页面内容代码编辑器做网页和用什么软件无关没任何纯文本编辑器，都能够制作软件。HTML简介超文本标记语言，是网页的文件格式。维护：由W3C组织维护 https://www.w3school.com.cn/特点：纯文本标记语
复制链接

扫一扫