Num.01-html基础

html基础

    • html骨架
    • 标题标签
    • 样式标签
    • 字体标签
    • 图像标签
    • 链接标签
    • 相对路径和绝对路径
    • 链表
      • 无序链表
      • 有序链表
    • 自定义链表
    • 表格标签
    • 表单
      • 表单控件
    • html5新标签
    • 新增的input type属性值
    • input中常用新属性
    • 多媒体

html骨架

快捷键: !+tab 键



<html>
<head>
	
	<meta charset="UTF-8" />
	
	<title>title>
head>
<body>
body>
html>

标题标签

标题 1 级最大, 6 级最小

	<h1>标题1h1>
	<h2>标题2h2>
	<h3>标题3h3>
	<h4>标题4h4>
	<h5>标题5h5>
	<h6>标题6h6>

Num.01-html基础_第1张图片

样式标签

段落标签:

	<p>p>

换行标签:

	<br />

水平线:

	<hr />

字体标签

字体标签属于行内元素标签

	加  粗	b strong(推荐)
	斜  体	i em(推荐)
	删除线	s del(推荐)
	下划线	u ins(推荐)

图像标签

img 属于块标签

<img src="" />

图像标签属性

src 图片路径url
alt 图像无法显示时所显示的内容
title 鼠标悬停图像上所显示的内容
width 图像宽度
height 图像高度
border 图像边框

链接标签

<a href="">a>

锚点定位:

<a href="#id">a>

相对路径和绝对路径

相对路径:

  1. 图像文件和 HTML 文件位于同一文件夹:
    只需输入图像文件的名称即可,如
  2. 图像文件位于 HTML 文件的下一级文件夹:
    输入文件夹名和文件名,之间用“/”隔开,如
  3. 图像文件位于 HTML 文件的上一级文件夹:
    在文件名之前加入 ../,如果是上两级,则需要使用 ../../,以此类推,如

绝对路径:

  1. “D:\web\img\logo.gif”
  2. 完整的网络地址,例如 “http://www.itcast.cn/images/logo.gif” ,电脑需要能联网

链表

无序链表

<ul>
	<li>li>
	<li>li>
	<li>li>
ul>

有序链表

<ol>
	<li>li>
	<li>li>
	<li>li>
ol>

自定义链表

<dl>
	<dt>名词1dt>
	<dd>名词1解释1dd>
	<dd>名词1解释2dd>
	<dd>名词1解释3dd>
	<dt>名词2dt>
	<dd>名词2解释1dd>
	<dd>名词2解释2dd>
	<dd>名词2解释3dd>
dl>

表格标签

<table border="1px" align="center" cellspacing="0" cellpadding="10px" >
			<caption>个人信息caption>
			<thead>
				<tr>
					<th>姓名th>
					<th>年龄th>
					<th>爱好th>
				tr>
			thead>
			<tbody>
				<tr>
					<td>张三td>
					<td>23td>
					<td>打球td>
				tr>
				<tr>
					<td>李四td>
					<td>24td>
					<td>跳舞td>
				tr>
			tbody>
		table>

表格的属性:

border 表格边框 默认无
align 表格水平居中 ,向左,向右 默认左对齐
cellspacing 单元格间隔 默认为2
cellpadding 内容和单元格的间隔 默认为1

表格标题:
caption
表格结构:
表头:thead
表头单元格:th
表体:tbody
表体单元格:td
单元格合并
rowspan:行合并
colspan:列合并
注意:
align 加到 table 标签中影响的是整个表格的位置,加到 thead 、 tbody 、 tr 、 td 可以改变表格中内容的位置,加到 aption 中没有任何变化

表单

表单控件

input控件
属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

示例:


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<form action="test.html" method="get" name="login">
			
			<label>
				用户名 :<input type="text" />
			label><br />
			<label>
				
				密  码:<input type="password" maxlength="6"/>
			label><br />
			籍  贯:<select>
						<option>--请选择--option>
						<option>北京option>
						<option>上海option>
						<option>江苏option>
						<option>浙江option>
			select><br />
			
			性  别:<input type="radio" name="sex" checked="checked"/><input type="radio" name="sex" /><br />
			爱  好:<input type="checkbox" name="hobby" checked="checked" />打篮球<input type="checkbox" name="hobby" />踢足球<input type="checkbox" name="hobby" />游泳<br />
			个人简历:<input type="file" /><br />
			<label>
				个人介绍:<br />
				<textarea>textarea>
			label><br />
			<input type="submit" /> <input type="reset" />
		form>
	body>
html>

html5新标签

  • header  定义文档的页眉 头部
  • nav   定义导航链接的部分
  • footer  定义文档或节的页脚 底部
  • article  定义文章
  • section  定义文档中的节,区域
  • aside  定义其所处内容之外的内容 侧边
  • datalist标签定义选项列表,与input元素配合使用
    案例:

	请输入明星:<input type="text" list="star" />	
	
	<datalist id="star">
		<option>刘德华option>
		<option>刘晓庆option>
		<option>刘星option>
		<option>李白option>
		<option>李洋option>
	datalist>

展现样式:
Num.01-html基础_第2张图片

  • fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用
    案例:
	<fieldset>
		<legend>用户登录legend>
		用户名:<input type="text" /><br />
		密 码:<input type="password" />
	fieldset>

展现样式:

Num.01-html基础_第3张图片

新增的input type属性值

类型 含义
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
number 输入数字格式
search 搜索框(体现语义化)
range 自由拖动滑块
time 小时分钟
date 年月日
datetime 时间
month 月年
week 星期 年

input中常用新属性

属性 含义
placeholder 占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回
autofocus 规定当页面加载时 input 元素应该自动获得焦点
multiple 多文件上传
autocomplete 规定表单是否应该启用自动完成功能 有2个值,一个是 on 一个是 off , on 代表记录已经输入的值
1.autocomplete 首先需要提交按钮
2.这个表单您必须给他名字
required 必填项 内容不能为空
accesskey 规定激活(使元素获得焦点)元素的快捷键 采用 alt + s 的形式

案例:

<form action="刘德华简介.html">
		请输入用户名:<input type="text" placeholder="请输入用户名" autocomplete="on" name="username" />
		<input type="submit" />
form>

多媒体

embed
embed 可以用来插入各种多媒体,格式可以是 Midi、 Wav、 AIFF、 AU、 MP3等等。 url 为音频或视频文件及其路径,可以是相对路径或绝对路径
embed 适用于超大的视频
步骤分析:

  1. 先上传视频到优酷,土豆,爱奇艺,腾讯、乐视等等
  2. 再分享,复制分享的链接
  3. 代码
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">
embed>

audio
audio 可以用来播放声音,由于版权等原因,不同的浏览器可支持播放的格式是不一样的,所以需要上传各种格式的声音


	<audio controls="controls">
		<source src="bgsound.mp3">source>
		<source src="music.ogg">source>
		您的浏览器不支持播放声音
	audio>

video
video 可以用来上传小视频,同样由于版权等原因,不同的浏览器可支持播放的格式是不一样的,所以需要上传各种格式的视频

	<video controls="controls">
		<source src="mp4.mp4">source>
		<source src="movie04.ogg">source>
		您的浏览器不支持播放视频
	video>

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