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. Java+selenium自动爬取网站内容并写入本地

    目的:本文主要描述如何使用Java+selenium爬取58同城招聘页,并记录指定职位的招聘公司名保存到本地 一.首先创建一个maven工程,配置依赖包 1 <dependencies> ...

  2. 【2020NIO.AC省选模拟#10】C. 寄蒜几盒

    题目链接 原题解: 可以发现,假设我们把凸多边形看做障碍,一个点没有被染色当且仅当在它的位置上能看到凸多边形任意两条相对的边中的一条(也就是能看到至少$\dfrac{n}{2}$条边). 对于每个询问 ...

  3. 招新题流程简介(WS2812)

    22物电科协软件招新题学习流程 有错误或者不当的地方请在评论区指出 题目简介 使用stm32驱动单一ws2812b灯珠实现呼吸灯效果,驱动及实现方法不限 演示效果 快速入门,在stm32核心板上点灯 ...

  4. React之一个组件的诞生

    此处以input组件为例 input.js import React from 'react' class Input extends React.Component { // ps:使用static ...

  5. 【摘】python和它的装饰器

    python和它的装饰器 即使你没听过装饰器,你也一定知道@staticmethod 作为函数的装饰器,你可以这样写 def mydecorator(function): def wrapped(*a ...

  6. Vue的学习(1)

    在学习Vue之前,首先大家要知道一个mvvm模式,何为mvvm模式呢,mvvm其实是有m,v和vm组成,类似与java里面的mvc模式,只不过mvc模式是针对于后台来说,而mvvm是针对于前台来说的, ...

  7. 将SNAPSHOT包上传到Nexus私服

    首先确定要上传的仓库的Type为hosted,Policy为Snapshot 上传命令为: mvn deploy:deploy-file -DgroupId=com.ctg.ag -Dartifact ...

  8. 本地mysql端口3306 一直干不掉这样解决

    第一步:先whereis   mysql(查找到MySQL的一些本地文件) 主要删除这两个   再干掉端口3306  即可

  9. Nexus系列---【使用docker搭建nexus3仓库】

    1.Docker搭建nexus3私服 如果机器配置比较低,建议指定初始内存大小,默认2G docker run -d \ --restart=always \ --name=nexus3 \ -p 6 ...

  10. Synchronized和Lock有什么区别？用Lock有什么好处？

    Synchronized 和 Lock 1.原始构成 Synchronized 是关键字属于JVM层面 (代码中以蓝色字体呈现) monitorenter .monitorexit Lock 是具体类 ...