12.13html框架
<! DOCTYPE html>
　　<html lang=“zh-CN”>
<head>
　　<meta charset=“GB2312、BIG5”>
　　<title>
　　</title>
</head>
　　<body>
　　　　你好吗
　　</body>
</html>
关于字符集，<meta charset=“UTF-8”>
即解析，存储，若翻译“你好吗”，charset要变成GB2312（简体中文），或BIG5（繁体中文）
或通用（GBK）但UTF-8基本所有语言都包含
14~.html标签的语义化
目的：使结构更加有序，看着清晰。
1，排版标签
标题标签（<h3>文本文档</h3>）
段落标签（<p>段落</p>）
水平线标签（<hr/ >）单身狗标签，即分界线，放在文本下面；
换行标签（<br />）放在话与话之间达到强制换行的效果
div和span标签（<div></div>一行只有一个，<span></span>一行可有好几个并排的产品）
  2，文本格式化标签
字体加粗（<b></b>或<strong></strong>，多数情况用strong，有强调语意的效果）
字体倾斜（<i></i>或<em></em>，多数情况用em）
删除线（<s></s>或<del></del>,多睡情况下用del）
下划线（<u></u>或<ins></ins>,所属情况下用ins）
 3，图像标签img(重点)
<img 属性1 属性2 。。。 />每个属性之间要有空格。
  • URL:是显示图片的，放在body那里，<img src=“ 图像URL” />
  • alt:如果图片不能正常显示，用讲解图片的文字去代替图片；如图
 
  • 上一个是alt，这个是title，
<h4> 带有title提示文本：鼠标放在图片上，显示的文字</h4>
<img src=“timg.gif(图片文件名)” title=“胡歌还在吹笛子等霍建华” />
  • 修改图片大小（宽度：width；高度：height，）一般只写一个，图片会等比例缩放
<img src=“timg.gif” title="。。。"width="600" />
  • 给图片加上边框
<img src=“timg.gif” title="。。。" width="600" border=“10” />,以后会讲到改变颜色
 
 
4，链接
英文缩写，锚：anchor (<a> </a>)
  • 外部链接
<a href=“http://www.baidu.com”>百度一下</a>
  • 内部链接
<a href="demo.html"> 点开链接处的的名称</a>
(demo.html:这里只是链接文件名）
  • 空链接
<a href="#" > 点链接处的名称</a>
  • 把图像变成链接
<a href="http://www.baidu.com"><img src="图像文件" /></a>
有一个很重要的点
之前的链接都是点击后直接覆盖当前页面，所以现在用_blank打开一个新页面
<a href=“http://www.baidu.com” target="_blank">百度一下</a>像这样
 
 
5，注释标签
添加注释（在代码中体现，方便看，不出现在浏览器中）
<!--注释内容-->
快捷方式：Ctrl+/这两个键
6,路径
第一层通常是目录文件夹，然后根目录
  • 相对路径，
路径分类
符号
说明
同一级路径
  
只需输入图像文件的名称即可，如<img src="baidu.gif" />。
下一级路径
“/”
图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="data:images/baidu.gif" />。
上一级路径
“../”
在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， 如<img src="../baidu.gif" />。
 
  1. 同一级路径：图片引用的时候，直接写图片的名字
  2. 下一级路径：直接在文件夹中再建一个文件夹
有两个斜杠杠
3，上一级路径（需要有../）
 
demo.html先从上一级里出来到html里，然后运用下一级路径的方法弄到images里，再找到图片。
如果有两级，则需要../../,两层，以此类推。
 
  • 绝对路径
绝对路径用的较少，我们理解下就可以了。 但是要注意，它的写法 特别是符号 \ 并不是 相对路径的 /
 
 
 
 
DAY2
 
目的：学习表格表单和列表
表格
  1. 创建表格
表格主要是为了展示数据
  • 创建：用table创建方格，用tr代表行，用td代表一行上的单元格
<table> 这里是表格内容</table>这里显示的就只是一个四方框框
<table>
<tr>缩进一个tab距离
<td>姓名</td>
<td>年龄</td>
<td>性别</td>再缩进一个tab距离，这里一行上的单元格（为了好看）
</tr>
</table>
2.表格属性
主要是在头头那儿添加属性，就是<table>后面
属性有常见的border（设置边框），width，height，还有align（设置和浏览器页面左对齐left，右对齐right，中间对齐center），还有十分重要的cellspacing(单元格与单元格之间的边框),cellpadding（单元格内容与单元格边框之间的距离）
 
 
<table border="2" width="500" height="200" align="center" >
3.表头单元格标签
想要让表头的字体居中加粗，只需要将之前表头两边的<td></td>改为<th></th>
4，表格标题
在<table>和<hr>之间，且与hr对齐那里，写上<caption>表格标题</caption>。
 
合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
三部曲
  1. 确定是跨行合并还是跨列合并
  2. 根据先上到下，先左后右的顺序，找到相应的起始位置，然后输入格式和个数：
(如：跨行：<td rowspan="2">照片</td> 跨列：<td colspan="3">个人简历</td>)
拓展：表格划分结构（浏览器右击 检查）
列表
列表是为了让布局整齐，整洁，好看的，自由。
#无序列表（重点）
格式：(要ul li 二者搭配)每一个点点后面的东西都是并列的，没有排名
<ul>(ul里面只能包含li，像什么<p></p>等都是不能写在里面的)
<li>这里啥都能放，之前的图片格式链接啥的</li>
</ul>
效果图：
#有序列表（类似于排名什么的）（了解）
格式：
<ol>
<li>都OK</li>
</ol>
与无序列表不同于：最后浏览器显示的是1,2,3,4这类排名
#自定义列表
格式：
<dl>
<dt>北京</dt>
<dd>东城区</dd>......
</dl>
表单标签
input用法：制剂室在<body></body>之间输入文本框前面要闻，然后输入type="text".
关于文本框：
<body> <--文本框--> 用户名：<input type="text" value="请输入用户名"> <--密码框--> 密码：<input type="password" value="请输入密码"> </body>
  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
name表单 <--文本框--> 用户名：<input type="text" name="username" value="请输入用户名" /> 昵称：<input type="text" name="nicheng" value="请输入用户名" />
的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
如果想要文本框里一开始就有默认值，用value;
  • name属性后面的值，是我们自己定义的。
关于单选框和复选框
单选框：
性别：男<input type="radio" name="sex" /> 女<input type="radio" name="sex" />
复选框：
爱好： 唱歌<input type="checkbox" name="hobby"/> 阅读<input type="checkbox" name="hobby"/> 小说<input type="checkbox" name="hobby"/> 旅游<input type="checkbox" name="hobby"/>
 
如果想要把一些按钮或选项提前设置好，需要在一些属性后面添加（checked="checked"）
 
还有几个按钮的格式，如上图，其中提交项只需（<input type="submit" />）,就会自动显示提交二字，但要是想更改名字，自行添加value...就OK。
label表单：
textarea文本域（像QQ空间留言之类可容量很多字）
<textarea>.....</textarea>
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
 
select下拉列表（供选择）
籍贯 <select> <option>北京</option> <option>天津</option> <option>山东</option> <option>江苏</option> </select>
如果想要一开始就固定一个选择项就
<option selected="selected" >北京</option>
加个东西
但大多数时候不用这个select，有缺点，不好看。
form表单域
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
格式如上；
属性
属性值
作用
action
url地址
用于指定接收并处理表单数据的服务器程序的url地址。
method
get/post
用于设置表单数据的提交方式，其取值为get或post。
name
名称
用于指定表单的名称，以区分同一个页面中的多个表单。
 

web初始：html记忆的更多相关文章

  1. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  2. JavaScript 客户端JavaScript之cookie和客户端持久性

    Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...

  3. OAuth 2.0 认证的原理与实践

    摘要: 使用 OAuth 2.0 认证的的好处是显然易见的.你只需要用同一个账号密码,就能在各个网站进行访问,而免去了在每个网站都进行注册的繁琐过程. 本文将介绍 OAuth 2.0 的原理,并基于 ...

  4. Recurrent Neural Networks(RNN) 循环神经网络初探

    1. 针对机器学习/深度神经网络“记忆能力”的讨论 0x1:数据规律的本质是能代表此类数据的通用模式 - 数据挖掘的本质是在进行模式提取 数据的本质是存储信息的介质,而模式(pattern)是信息的一 ...

  5. 强化学习9-Deep Q Learning

    之前讲到Sarsa和Q Learning都不太适合解决大规模问题,为什么呢? 因为传统的强化学习都有一张Q表,这张Q表记录了每个状态下,每个动作的q值,但是现实问题往往极其复杂,其状态非常多,甚至是连 ...

  6. 【Spark】SparkStreaming-Kafka-集成-终极参考资料

    SparkStreaming-Kafka-集成-终极参考资料 Spark Streaming和Kafka整合开发指南(二) – 过往记忆 Streamingkafka零丢失 | 等英博客 spark- ...

  7. WebSettings 文档 API 翻译 常用设置

    . setDefaultFontSize(int size)  Sets the default font size. The default is 16. setDefaultTextEncodin ...

  8. WebSettings 最全属性说明

    setAllowContentAccess (boolean allow) 是否允许在WebView中访问内容URL(Content Url),默认允许.内容Url访问允许WebView从安装在系统中 ...

  9. 线上cpu100%问题快速定位

    问题描述:服务器上部署了多个tomcat,即垂直切分的Web站点,记忆多个Java微服务,突然收到运维的cpu异常告警. 步骤一:找到最耗cpu的进程 工具:top 方法: 执行top -c,显示进程 ...

  10. 2022-7-9 html 第七组 刘昀航

    ​ 一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...

随机推荐

  1. Unity3D——关于质量的设置

    在Unity3D中,你开发一款游戏,可能需要同时发布到不同平台中.比如,对于PC平台,你可能需要引擎打包高质量的材质纹理,光照图信息.而对于Mobile平台,由于CPU上载数据到GPU需要一定宽带,想 ...

  2. Linux网络第三章：DNS服务器原理及搭建

    目录 一.DNS服务器原理 1.什么是DNS 2.DNS服务器查询过程 二.主备DNS服务器搭建 1.搭建环境 2.检查安装DNS服务 3.修改主服务器配置文件 4.修改备服务器配置文件 5.启动服务 ...

  3. linux 防火墙管理

    1.查看防火墙状态指令 Firewall-cmd --state 2.关闭防火墙 service firewall stop 3.打开防火墙 service firewall start 4.重启防火 ...

  4. Flash、EEPROM、SRAM的区别与理解

    Flash.EEPROM.SRAM的区别与理解1. Flash.EEPROM.SRAM的区别(1) Flash存储器Flash适用于速度要求高.容量要求大.掉电时要求数据不丢失的场合. (2) EEP ...

  5. 高性能的StampedLock锁

    StampedLock 支持的三种锁模式: 1.ReadWriteLock 支持两种模式:一种是读锁,一种是写锁 2.StampedLock 支持三种模式,分别是:写锁.悲观读锁和乐观读 1)写锁.悲 ...

  6. HTTP-看这一篇就够了

    HTTP和HTTPS有什么区别 1.传输过程中信息是否加密,HTTP是超文本传输协议,信息是明文传输,HTTPS是具有安全性的SSL加密的超文本传输协议,信息是加密传输: 2.服务端使用的端口号不一致 ...

  7. react封装图片上传组件

    支持表单受控和非受控使用,基于antd upload 进行的二次封装, 使用场景如下图: 1.组件文件夹 2. index.tsx贴代码 import React, { useEffect, useM ...

  8. Date 对象 定时器

    日期对象 Date 概述:date是表示日期时间的对象,主要的方法是获取时间和设置日期时间. date声明 使用new Date声明 有4种方式 1.不设参数 是获取当前的本地时间 var date ...

  9. SpringCloud设置随机端口后的问题

    问题描述 SpringCloud服务提供者,设定了随机端口配置后,在EurekaServer中的注册端口.Tomcat的web端口.运行中获取到的server.port配置端口,共出现了4个不同的端口 ...

  10. 关于pandas的一些用法

    pandas用法之前我总是把他想的无比复杂.其实也是比较简单的,这个东西在做数据统计的时候还是挺好用的. 然后这里列举几个比较好用的几段代码.偏向数据透视类型pivot的,导出方式是直接在IDE 生成 ...