个人笔记全部手打 有点乱~~~~ 我相信每个人都有属于每个人的笔记喔~~~~~~~~~~~~~~~~~~~~~~~~~
1.title 双标签 作用:头部命名
2.body 双 主体标签 ~~~
3.h1~h6 双 作用:字体从大到小且一个标题占一行
4.p 双 段落标签 作用:分段且段落间保有空隙
5.<br /> 单 换行标签 作用:另起一行显示
6.文本格式化标签:strong 双 加粗 ;em 双 倾斜; del 双 删除线
;ins 双 下划线 hr 单标签 水平线
7.div和span标签 双 没有语义,它们是一个盒子,用来装内容的,div独占一行 ;span全部在一行 ,大盒子与小盒子的区别
8.<img src=“图像URL”/> 单 图像标签 ,当图片显示不出来的时候<img src=“图像URL” alt=“你好”/>加alt文字提示,同理加title鼠标放在图片显示文字 加weight宽 height高 border边框 …/是返回上一级 /是下一级
9.超链接标签 a 双 <a href = “跳转目标” target = "目标窗口的弹出方式“>文本或者图像</a> 例子:<a href = “http://erfwfw. com” target = "_black“>腾讯</a> target _self当前窗口打开页面 _black新窗口打开页面 内部链接:打开方式< a href = "xxx.html“>内部</a> “#”为空 下载链接:<a href = "地址是一个文件或者压缩包 会下载这个文件“>下载</a> 例子:<a href = “http…“><img src = “asdf.jpg” /></a> 锚点链接:我们点击链接,快速定位位置
1.<a href = “#名字”>xxx</a> 目标位置标签<h3 id = "名字“>xx介绍</h3 >
10.注释:快捷键ctrl + / <! – --> // /* /
特殊字符   小于号&it 大于号> 和号& 人名币¥ 版权© 注册商标® 摄氏度° 正负号± 乘号× 除号 ÷ 平方2² 立方3³
11.表格标签:table --tr–td 双标签 table定义表格 tr定义表格中的行 td 表格中的格子 在tr标签中写th表示表格的表头部分
在table中可以加样式 align对其方式后面的css有写到的 left right center 边框border有1和“” cellpadding规定单元边沿与其内容之间的空白0 cellspacing 规定单元格之间的空白0 width单元格之间的宽度 height高度 表格结构标签 thead 和 tbody 使其更清晰
跨行合并单元格:rowspan=“数字”
跨列合并单元格:colspan=“数字”
找到需要合并的单元格(td)后删除后面多余单元格
12.列表标签 ul li 列表项 ul li 无序列表 注意⚠️ul内只能放li
ol li 列表项li ol 有序列表 注意⚠️也是ol只能放li
dl dt名词1dt dd名词1解释dd dl自定义列表
13.表单标签 form 双标签 用于定义表单域 作用:会把
它范围内的表单元素提交给服务器 例子:<form action = "url地址“ method=”提交方式“name=”表单名称“></form>
input单标签 <input type = "属性值 “>属性值:button 可点击按钮 checkbox 复选框 file输入字段和“浏览”按钮 ,供文件上传 hidden隐藏的输入字段 image图像形式的提交按钮 password密码字段,字段被掩码 radio 单选按钮 reset 重置按钮 submit 提交按钮 text 文本框 在input 内加name 是命名的意思 value在输入框给出提示(也可以更改和添加文字)注意⚠️单选按钮和复选框要相同的name值 也可以设置checked = “chenked”属性 当打开时默认选中 maxlength = “整数” 规定输入字段中的最大长度 :::label 双标签 增加用户的体验 语法label for = “sex“ 男 label <input type=“radio” name = ‘sex’ id = “sex”/> 主要是for 和 id要对上
select 双标签 下拉列表 语法 : select option 选1 option 。。。
select 在option的内部加selected = “selected”是默认选定的状态 texttarea 双标签 特大号文本框 作用:留言板 评论类 语法form texttarea rows = 3 cols = 20 文本内容texttarea form
** HTML的笔记就到这里了*
后续会更新CSS的案例
综合案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面
</title>
</head>
<body>
<h4>青春不常在 拼搏向上</h4>
<table align="left" width="500">
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" id="nan"><label for="nan"><img src="image/男.png" width="20" height="20">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="image/女.png" width="20" height="20">女</label></td>
</tr>
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年--</option>
<option>1998</option>
<option selected="selected">1999</option>
<option>2000</option>
</select>
<select>
<option>--请选择月--</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<select>
<option>--请选择日--</option>
<option>1日</option>
<option>2日</option>
<option>3日</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="广东省茂名市"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">离婚</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="小学毕业"></td>
</tr>
<tr>
<td>你喜欢的水果</td>
<td><input type="checkbox" name="fruit">苹果<input type="checkbox" name="fruit">雪梨<input type="checkbox" name="fruit">香蕉<input type="checkbox" name="fruit">草莓</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<form><textarea rows="5" cols="40">
请开始你的表演吧!
</textarea></form>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意加入和遵守相关条例
</td>
</tr>
<tr>
<td></td>
<td><a href="#">会员登陆</a></td>
</tr>
<tr>
<td></td>
<td>
<h5>我同意</h5>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>