HTML
HTML是网页内容的载体。内容就是网页制造者放在页面上想要让用户浏览的信息,可以包含文字,图片,视频等等…
首先熟悉快捷键:
ctrl + shift + i 在浏览器进入开发者模式
这里附录实战网站:
万维手册
大纲
- 简单介绍(和各种标签)
具体案例
简单介绍
HTML是超文本标签语言,而HTML文本是由HTML标签组成的文本,可以包括文字,图形,动画 ,声音,表格,链接等
HTML的结构包括头部(Head),主体(Body)两大部分
一个html文件的大致组成如下
标签的说明
标签使用细节:
- 标签不能交叉嵌套
- 标签必须正确关闭,即如果是双标签,有头必须有尾
- 注释不能嵌套
- HTML 语法不严谨。有时候标签不闭合,属性值不带“”也不报错
介绍一下fond标签(用来调整字体,虽然现在不怎么使用)
<fond 属性,比如颜色,大小,字体> 文字内容
介绍一下字符实体(类似转义字符)
常用的特殊字符:
对于 < : <,对于 > : & gt;
空格 :  
标题标签
超链接标签
超链接是指从一个网友指向一个目标的链接关系,这个目标可以是网页,图片,程序等等
<a href = "www.baidu.com">百度链接</a>
无序列表 ul / li
有序列表 oi / li
图像标签
使用img标签
表格标签
<table></table>
下面是一部分常用的
使用height属性设置表格高度
下面是实现跨行跨列的操作
表单标签
注意:这里method的方式get和post
get:提交的数据显示在浏览器地址栏,请求不安全,有长度限制
post:提交的数据是用https传输的,请求安全,理论上无长度限制
下面是示例代码和最后的效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单收集</title>
</head>
<body>
<form>
用户注册信息<br>
用户名称:<input type="text" name="username"><br>
用户密码:<input type="password" name="pwd1"><br>
确认密码:<input type="password" name="pwd2"><br>
选择你喜欢的运动项目:
<!-- 如果是同一组,需要保证name属性一致-->
<input type="checkbox" name="sport" value="篮球">篮球<br>
<input type="checkbox" name="sport" value="足球" checked>足球<br>
<input type="checkbox" name="sport" value="羽毛球" checked>羽毛球<br>
请选择性别 :
<input type="radio" name="gender" value="male">男<br>
<input type="radio" name="gender" value="female">女<br>
请选择城市 :
<select name="city">
<option>--选择--</option>
<option value="成都">成都</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
自我介绍 :
<textarea rows="8" cols="20"></textarea><br>
选择你的文件(头像)<input type="file" name="myfile"><br>
<input type="submit" value="提交"><input type="reset" value="重新填写">
</form>
</body>
</html>
注意事项:
div标签
<div>
标签可以把文档分割为独立的,不同的部分
<div>
是一个块级元素。它的内容自动的开始一个新行
p标签
用该标签来定义段落(具有自动换行)
会自动在其前后创建空白
span标签
span标签是内联元素,不像块级元素(如:div标签,p标签)
如果不对span应用样式,span标签则没有任何显示效果