html简介
html是一种标记语言,用来开发网页,展现视频,文字,图片,声音等等,它本身不需要编译,而且不区分大小写,它是web开发的基础。
html结构
<元素 属性=‘属性值’……>内容</元素> (元素就是标记)
如果没有内容的话,可以这样写:
<元素 属性=‘属性值’……/元素>
html常用标记
<p>内容</p> //段落标记
<b> </b> //加粗
<font size="7" color="#faebd7">加油</font> //字体大小和颜色
</br> //换行
超链接
<a href="url"> ……</href>
超链接在新页面打开
<a href="……" target="_blank">……</a>
target常见的两个属性值:
-
_blank(在新页面打开)
-
_self(在本页面打开)
图片元素:
<img src="URL" width="200"/> //指定宽度即可,图片不会变形
border="5" //给图片添加边框
表格:
- 边框宽度 border
- 边框颜色 bordercolor
- 表格长宽width
- 位置align
- 行 tr
- 列 td
- 背景颜色 bgcolor
- 空隙大小 cellspacing
- 填充大小 cellpadding
- 合并列 colspan
- 合并行 rowspan
<table border="5" width="500" align="center" bgcolor="red">
<tr><td>2</td><td>3</td></tr>
</table>
列表
无序列表
<li>英语</li>
<li>数学</li>
<li>语文</li>
前面的实心小黑圆可以换成其他的
type有三种:disc (实心圆点)circle (空心圆)square(实心正方形)
<ul type="circle">
<li>英语</li>
<li>数学</li>
<li>语文</li>
</ul>
有序列表
属性值有1(阿拉伯数字),a(小写字母),A(大写字母),i(小写罗马数字),I(大写罗马数字)
<ol type="属性值" start="起始值">
<li>英语</li>
<li>数学</li>
<li>语文</li>
</ol>
框架
frameset和iframe
frameset标签在HTML5中不支持,不过还可以用
创建两个html文件first2,first3
<body bgcolor="#dc143c">
薛之谦
<a href="frist2.html" target="1"> //注意这儿,很重要
蔡徐坤
</a>
</body>
<body bgcolor="#006400">
林俊杰
</body>
创建html文件first4(把body标签去掉),运行后,可以看到左右分隔的效果,
点击左边的超链接,右边将替换成first2.html。
<frameset cols="50%,50%">
<frame src="frist2.html">
<frame src="frist3.html" name="1">
</frameset>
<frameset frameborder="边框大小"
bordercolor="边框色彩"
framespacing="空白区域大小"
cols="各窗口百分比"
rows="各窗口百分比">
<frame name="名字" src="html路径" noresize >
</frameset>
说明:noresize将不允许拖拽
表单
让用户输入数据,提交给服务器
<form action="url" method="get">
各种元素 文本框,输入框,密码框等
</form>
method有两种,get和post,默认是get
表单提供给用户的输入形式
<input type="" name="'>
type可以为text,password,image,hidden(隐藏域),submit,reset,radio(单选框),checkbox(复选框)
<form action="frist2.html" method="get">
用户名:<input type="text"><br>
密 码:<input type="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重填">
</form>
要想文本框和密码框对齐,需要
两个空格实体为一个汉字
或者全角打一个空格
选择框
<select name="1">
<option>----请选择----</option>
<option>苹果</option>
<option>葡萄</option>
<option>西瓜</option>
</select>
文本域
<textarea cols="50" rows="10">请输入</textarea>
<input type="file">请选择你要上传的文件
字符集
背景和字体
<body bgcolor="" text="" link="" alink="" vlink="">
bgcolor背景色彩
text 非可连接的文字色彩
link 可连接的文字色彩
alink 正被点击的链接的色彩
vlink 访问过的链接色彩
页面空白
页面左边的空白
<body leftmargin="">
页面上方的空白
<body topmatgin="">
单位为像素
超链接
target的值
_blank 新窗口
_self 本窗口
_parent 父窗口
_top 整个浏览器窗口
<hr> 标尺线
标尺线也有自己的一些属性,颜色,位置
物理字体
<b> 加粗
<i> 斜体
<u> 下划线
<font face="字体样式">
其他元素(补充和加强)
文字的对齐
<hn align="">
div(暂且不论)
块引用
<blockquote>
I like you very much
</blockquote>
复选框中checked表示默认选择
<input type="checkbox" name="name" checked>苹果
<input type="checkbox" name="name" checked>橘子
<input type="checkbox" name="name" checked>西瓜
单选框radio也类似,但是后面的checked会覆盖前面的,只保留最后一个默认。
列表框selectable menu默认选择用selected
默认选择西瓜
<select name="1">
<option>----请选择----</option>
<option>苹果</option>
<option>葡萄</option>
<option selected>西瓜</option>
</select>
size=“” ,要展示几个选项出来
<select name="1" size="3">
<option>----请选择----</option>
<option>苹果</option>
<option>葡萄</option>
<option selected>西瓜</option>
</select>
展示三个选项
文本域textarea ,默认是会自动换行 ,加入warp=off
表格一些补充:
valign=""用来控制文本位置top,bottom
th 会显示粗体
<table border="1" height="100" width="100" >
<tr>
<td valign="top">姓名</td><th>班级</th>
</tr>
</table>
会移动的文字
方向从右往左移动
<marquee direction="right">我会移动鸭</marquee>
多媒体
嵌入多媒体文本(电影,声音)
<embed src="url">