HTML与CSS 学习笔记(一)

HTML:hyperText markup language 超文本编辑语言

charset:编码字符集

常用的编码:

gb2312:中国国家标准低2312条只能识别简体中文

gbk:gb2312的拓展版本,包含了繁体字

unicode:万国码

utf-8: unicode的进阶版本最常用

<html lang = 'en'></html>根标签所有标签元素都包裹在 html标签里面

lang属性:告诉搜索引擎爬虫设计的网站是关于什么内容的 en-->英文  zh-->中文

<em></em>斜体  常用于做染色标签

<del></del> 删除线 eg:淘宝商品原价

<address></address> 一般用于写地址

<div></div> <span></span> :

用法:

1:分块,充当容器让页面更加结构化

2:绑定化操作

回车/空格:英文单词/文本分隔符

&lt; 对应 "<"   英文单词 less than

&gt; 对应 ">" 英文单词 great than

&times; 乘号

&copy; 版权符号

<ol type =" " reserved = "reserved"></ol> 有序列表

type: 排序类型

reversed:倒序

<ul type = " "></ul> :无序列表

type值:

disc:实心圆(默认)

square:正方形(实心)

circle:空心圆

<img src = "" alt ="" title = "" /> 图片标签

src : 图片路径

alt:当图片地址发生错误无法正常显示图片时,展示一定的信息

title:图片提示符 当鼠标放到图片上时 会自动显示 我们给title属性设置的值

<a href ="" target="_self"></a> 超链接 向href 的路径跳转 默认 _self 形式跳转

<base target = "_blank"/> 该标签的作用为 让页面中所有的链接 都以 "_blank"方式打开  当target值为"_self"时同理

target: 当值为 "_self"在当前页面打开一个页面 当值为"_blank" 时  将会在一个新的页面打开一个页面

作用:

1.打电话  <a href = "tel:xxxxxxxxx"></a>

2.锚点  <a href = "#id"></a>

3.超链接 

4.发邮件 <a href = "mailto:xxxx@xxx.com"></a>

5.协议限定符 <a href = "javascript:代码"></a> 强制执行javascript 代码  当 <a href = "javascript: void(0)"></a> 时  a 不跳转

注意点:当 给 href属性为空时  若 这个a标签最页面最底部 点击该a链家包含的元素后 会自动跳到页面最顶部

解决方法:<a href = "javascript: void(0)"></a>

表单标签

<form method = "" action = ""></form>

method:数据传送方式 get/post  

get方法传送数据:传送的数据的值会在地址栏上显示出来 post 方式则不会出现这种情况 所以说使用post方式传送表单中的数据较为安全一些

action:数据传送的地址

onfocus:聚焦事件

onblur:失焦事件

<input type = "radio" name = "sex" value = "" checked = "checked">

<label for = "id"></label> :关联input 表单

radio:单选按钮  常用于选择性别   只有当两个type 类型为 radio 的 input元素 的name值一致时   才可以 在两个单选按钮中 只选择一个

checked:默认选中

value:input输入框中的值

checkbox :多选按钮

<select >

  <option value = ""></option>    

  <option value = ""></option>

  <option value = ""></option>

    ...

</select>  下拉菜单

<option></option> 标签相当于value  如果里面有value 将以value为主

<textarea></textarea> 多行文本输入框

表格标签

<table></table>  注意:table 标签一般三参为0 即 border cellspacing  cellpadding三个属性的值为 0 

<tr></tr> 行

<td></td> 单元格

属性:

cellspacing:单元格与单元格的距离

cellpadding:内容与单元格边框的距离

<th></th> 表头 

<caption></caption> 表格标题 为表格内部的额外部分

<thead></thead> 包裹表格头部

<tbody></tbody> 包裹表格主题

跨列合并: colspan = 'n'  n 为要合并的列的个数

跨行合并 rowspan = 'n'

合并规则 :先上后下  先左后右

删除的个数 = 合并的个数 - 1

posted @ 2019-03-15 00:31  水墨&青花  阅读(154)  评论(0)    收藏  举报