Html+CSS学习杂记

笔记

页内元素跳转链接–锚点链接跳转

即可

base 设置页面打开方式,放在head中则设置全局打开方式

base是单标签

target="blank"很危险!

通过target="blank"打开的页面能够直接使用window.opener来访问来源页面的window对象,甚至恶意修改你的原页面
点击查看target="blank"是如何被利用的

预格式化文本pre

 按照原 本的 格式,来渲染网页文本 

 按照
原本的
格式,来渲染网页文本

表格

border 外边框
cellpaddiing z字和单元格边框距离
cellspcing 单元格之间的距离
align 整个表格在页面的位置

表头单元格


表格的表头 主题 注脚可以用以上3个标签划分出来3个不同的区域,以便CSS样式更改
其实与用3个划分出来的区域没有区别,只是用上了标签的语义化,提高搜索引擎效率,方便盲人阅读器的特殊渲染等

列表标签

专门用来布局,比表格自由整合度更高

有序列表

<ol>
	<li>冠军</li>
	<li>亚军</li>
<ol>
  1. 冠军
  2. 亚军

无序列表

<ul>
	<li>列表项1li>
ul> 
  • 列表项1
  • 列表项2
  • ul中不能放别的标签,只能放li
  • 前面有默认自带的小圆点,可通过CSS样式进行更改

自定义列表

常用于对术语或名词的解释
常用于页脚功能分区布局

<dl>
	<dt>帮助中心dt> 
	<dd>用户管理dd>
	<dd>购物指南dd>
dt>
帮助中心
用户管理
购物指南

表单

的type属性

将表格中某一行

换成 表头文字加粗并居中

表格标题

必须写在

标签的后面,即它必须在表格整体框之中

<table border="1"  align="center" cellspacing="100" cellpadding="100">
  <caption>jj</caption>
   <tr>
   		<th>dd</th>	
   		<th>yy</th>	
   </tr>
    <tr>
   		<td>dd</td>	
   		<td>yy</td>	
   </tr>
</table>
jj
dd yy
dd yy

合并单元格

跨行合并

跨列合并

合并单元格的顺序—先下后上,先左后右(同写字笔画顺序)

如果是修改合并单元格 要注意删除合并单元格后面的多余的单元格

表格结构划分

属性值 作用 注解
text 可输入文本框
password 密码框 不可视
radio 单选框 ⭕,搭配name使用,同name值只能选一项
checkbox 复选框 ✔同样搭配name使用,可多选
button 普通按钮 需搭配form表单域使用才能生效
submit 提交按钮 需搭配form表单域使用才能生效
file 文件选择按钮 会提示未选中文件
reset 重置按钮
image 图像形式的提交按钮
其他属性 属性值 作用
checked checked 使单选/复选框默认选中
value 默认文本
size 正整数 显示宽度!注意不是width
name 控件名称
maxlength 控件允许的最多字符数

label标签 能够绑定对应表单元素的焦点

直接包含


#####通过for 和 id 来实现
``昵称:

####文本域 双标签 能输入更多的文字
``

下拉列表

<select>
	<option>soption>
	<option>soption>
select>

表示该选项默认选中,否则为第一个选项默认选中
所以一般第一个中写提示文本如–请选择城市–

###form 表单域 大的框用于框住所有表单元素
用于将收集的用户信息传递给服务器

<form action="url" method="提交方法get/post"  name="该表单域名">
form>

action提交到的网址
method提交方法分get和post get会在跳转链接中暴露密码 post不会

CSS样式表=选择器{样式:值}

添加样式方法

  • 外联样式表 将样式保存在CSS文件中
    通过
    <link rel="stylesheet"  type="text/css" href=" ">
    
                        

你可能感兴趣的:(前端web)