码迷,mamicode.com
首页 > Web开发 > 详细

2021/6/7 html基础完成记忆

时间:2021-06-08 22:36:16      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:label   circle   pad   开始   fresh   分割线   BMI   大于等于   工具   

‘‘‘
一、HTML协议
超文本标记语言
用于与浏览器进行交互的语言,相当于传递给浏览器的指令
二、HTML小知识必学
1. html注释
单行注释、多行注释都使用 <!--注释内容-->
2. 最基本的html文档结构
<!DOCTYPE html>
<html lange=‘zh-CN‘>
<head>
<title>浏览器窗口名称</title>
<meta charset=‘UTF-8‘/>
</head>
<body>
</body>
</html>
3. HTML标签分类
1)分类方式1
单标签,无需输入文本内容
<img/>
双标签,增加文本内容的输入
<h1></h1>
2)分类方式2
块级标签 p、div、h1-h6
标签本身占据一行的布局,可以使用width、height来控制
块级标签可以继续嵌套块级、行内标签
行内标签 b i u s span img
标签本身不占据布局,根据标签内的文本内容才会占据布局空间
行内标签只能嵌套行内标签
4. 标签的语法
<标签名 属性1="属性值1" 属性2="属性值2" ...></标签名>
<标签名 属性1="属性值1" 属性2="属性值2" .../>
5. 通用属性
id 设置标签在html页面的唯一id
class 设置标签的css样式名
style 设置该标签的css样式
title 设置标签的额外信息,作为工具条使用
input使用 --> for="id值" 将当前标签绑定id值的标签,当点击本标签时,触发id值的标签
6. 自定义属性
<img username="", password="">
三、head内常用标签
<meta />
name="keywords"/"keyword" content="关键字,..."
name="description" content="描述信息"
http-equiv="content-type" content="text/html"
http-equiv="refresh" content="second;url="
http-equiv="e-na-compatible" content="IE=edge"
charset="UTF-8"
<style></style> 内部书写css代码
<script></script> 内部书写js代码
window.onload = function(){
js代码
}
src="url"
<link rel="stylesheet" href="url"/>
<title>窗口名称</title>
四、body内常用标签
1. 基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落</p>
<br/>回车
<hr/>水平分割线
2. 特殊字符
&nbsp; 空格
&amp; &
&copy; 版权
&reg; 注册
&gt; 大于
&ge; 大于等于
&lt; 小于
&le; 小于等于
&ne; 不等于
3. div和span
<div></div>
div是块级标签,用于html代码排版,以及统一设置的
<span></span>
span是行内标签,用于在div内部进行细节排版
4. img
<img src="URL" alt="图片丢失的文本信息" title="鼠标悬停的文本信息" width="宽px" height="高px"/>
PS:width和height是用来设置图片的宽和高的,单位px,对于图片只需选择其中一个属性设置,另外一个属性就会等比例
进行调整,如果非要同时用上两个属性,那么图片有可能会出现比例失调造成的失真现象
5. a
<a href="URL" target="_blank/_self"/>
a标签用于跳转页面操作
URL:
绝对URL:以网页或者服务器根目录的绝对路径
相对URL:以站点目录为根的想对路径
锚URL:href="#id值" 跳转到当前页面的id值的标签
_blank:生成新窗口跳转
_self:在当前窗口显示
6. 列表
无序列表
<ul type=‘‘> disc 实心圆点,默认 circle 空心圆点 square 实心方块 none 无样式
<li></li>
<li></li>
<li></li>
...
</ul>
有序列表
<ol type=‘‘ start=‘‘>
<li></li>
<li></li>
<li></li>
...
</ol>
type=1/A/a/I/i 默认1
start=设置开始
标题列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
7. 表格
table
border
cellpadding
cellspacing
width
height
th/td
rowspan
colspan
table
thead
tr
th
tbody
tr
td
8. 表单
form
action=‘‘
target=‘_self‘
method=‘get/post‘
enctype=‘application/x-www-form-urlencoded‘
‘multipart/form-data‘
name
novalidate
autocomplete=‘no‘
accept-charset=‘gbk‘

label for=input_id
input
type
text
password
date
hidden

checkbox
radio

submit
reset
button
name
checked
disabled
readonly
value
1. 对于输入框,设置默认值
2. 对于提交按钮,设置按钮名称
3. 对于选择框,设置选项名称
placeholder=‘提示文本‘
textarea 多行文本
name=‘‘
rows=‘‘
cols=‘‘
id=‘‘
select 下拉框
optgroup label
option
name=‘‘
multiple多选
selected
disabled
mutile多选

‘‘‘

2021/6/7 html基础完成记忆

标签:label   circle   pad   开始   fresh   分割线   BMI   大于等于   工具   

原文地址:https://www.cnblogs.com/zhangzhuowei/p/14860988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!