web学习之-html
程序员文章站
2022-07-11 12:14:22
...
从今天起就要正式学习web相关知识了，写博客来记录我的心得。
第一章当从html开始，
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
网页有三大内容 ：
1.标签 承载内容
2.层叠样式表 渲染页面
3.JavaScript 交互式行为。
html基本格式：
<!DOCTYPE html> 声明为 HTML5 文档 告诉浏览器我用html5的规范。
<html> 开始标签
<head>
head里面的东西不会出现在浏览器中，
<meta charset="utf-8"> 设置编码
<title>网页标题</title>
层叠样式表写在head里
css就是层叠样式表的缩写。
<style type="text/css">
h1 {
样式表来渲染h1
color:blue; 颜色
font-size:2cm;(或89px）字体大小
font-family:"华文宋体"； 字体类型
}
</style>
</head>
<body> 显示在浏览器里的内容写在这里
<h1>一级标题</h1>
<hr> 水平分割线
<br>换行
<p>段落标签，段落之间有间距</p>
<!-- 注释 -->
<button onclick="showWrite()">确定</button>
<script>
写javascript代码 函数的定义以function开头
function showWrite(){
window.alert("123456"); #window已经定义好的内置类。弹出一个警告框
}
</script>
</body>
</html> 结束标签
浏览器里有一个空白折叠的功能，无论敲多少回车，空格都会折成一个空格。
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
<h1>这是一个标题</h1>
HTML 段落是通过标签 <p> 来定义的.
<p>这是一个段落。</p>
HTML 链接是通过标签 <a> 来定义的
1.页面链接， 锚点链接，（回到首部）功能链接 （可以发邮件）
<a href="https://www.baidu.com",target="_blank">这是一个链接</a>
target是在一个新窗口打开 taget="_self"在本窗口打开
a{
text:red;
text-decoration:none; 无下划线
}
a:hover{鼠标悬停时
text:red;
}
要先在首部添加一个<a name="top"></a> 加一个锚点
<a href="#top">回顶部</a>
还可以用别的网页的锚点 href="hello.html#foo”>
HTML 图像是通过标签 <img> 来定义的.
<img src="/images/logo.png" width="258" height="39">
<sub>上标</sub>
<sup>下标</sup>
<em>斜体</em>
<strong>粗体</strong>
<del>删除线</del>
<ins>下滑线<ins>
html属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题
下面列出了适用于大多数 HTML 元素的属性：
属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
字符实体:
<p>< 小于号</p>
<p>> 大于号</p>
<p>  空格</p>
上面是一些基础的标签，下面来学一些制表相关的吧
列表标签：
有序列表：
<ol> order list
<li>香蕉</li> list item
<li>火龙果</li>
</ol>
无序列表
<ul> unorder list
<li>香蕉</li> list item
<li>火龙果</li>
</ul>
定义列表：
<dl>
<dt>Python</dt> define title
<dd>面向对象的编程语言</dd> define description
</dl>
一般图文混排的时候，dt放图片，dd放说明
列表可以嵌套。
学完标签，我们来下一个IDE吧，提高我们的工作效率。
HBuilder下载地址
下载：
下载第一个HBuilderX。
直接解压就能用。
先来个快捷键来展示一下 ol>li*5>a 再按制表键就出来了。
有了这个神器后我们继续来学习表格：
用 table>tr*2>td*2就能建一个表格了 两行两列，
<table border=1>border可以加边框，默认是没有边框。
<caption>学生考试成绩表</caption> 可以加标题。
<tr> 行
<th width="120> 列</td> 把第一行用的不一样。
<th width="120></td> 可以调表的宽度。
</tr>
<tr>
<td rowsapn="2”></td> 跨两行
<td colspan=”3“ align="center" ></td> 跨三列
</tr>
</table>
想在外面整体加一个标签，就要ctrl+]就会有了。有的会在tr外面包thead，tbody，tfoot
但是效果都一样
更一步进阶，就要学习表单
表单里的分类：
输入框 text password
单选框 radio
多选框 checkbox
下拉框 select
日期 date
邮箱 email
提交 submit
重置 reset
value 是要提交服务器的数据
<input type=“radio” name=“sex”,value="1"checked>男
通过键值对提交给服务器 name为键而value为值。
每个表单都要有名字。 如果是选择的是要用value的 而如果是填的就不用写value 了。
<form action="服务器的那个程序来处理这个表单" method="post" enctype="multipart/form-data"> 如果想要上传文件就要加这个enctype
<input type="file" 上传文件，
<p>
用户名:
<!-- 文本框-->
<input type="text" name="username" size="50 required readonly> 加个required表示必须要填 用size来表示长度。只能读。
</p>
<p>
密码:
<input type="password" name="password" maxlength="20" placeholder="用户名由6到20个字符构成“> 这是一个提示
</p>
<p>
确认密码：
<input type="password" name="password">
</p>
<p>
性别：
<input type="radio" name="sex",value="1"checked>男 <!--把name改为一样的是为了只能选择一个,默认选男checked-->
<input type="radio" name="sex" >女
</p>
<p>
爱好：
<input type="checkbox"name="fv">阅读
<input type="checkbox"name="fv">旅游
<input type="checkbox"name="fv">美食
<input type="checkbox"name="fv">运动
</p>
<p>
<select name="provance">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
<option value="5" selected>四川省</option>
</select>
</p>
<p>
生日
<input type="date">
</p>
<p>
邮箱
<input type="email" value="213111111">
</p>
<p>
自我介绍:用文本区
<textarea rows="30" cols="10">
</textarea>
</p>
<p>
<input type="submit"value="确认注册">
<input type="reset",value="重置">
</p>
</form>相信你肯定也想知道音频标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls loop>
<source src="木鱼声自然.mp3"></source>
</audio>
<video controls >
<source src="qq.mp4">
</source >
</video>
</body>
</html>
还可以用iframe来显示别人的网页》
<iframe src="http://map.baidu.com" width="1440" height="900" frameborder="0"></iframe>
最后要说说我们的块级标签和行级标签
行级标签不会独占行，
而块级标签则会独占整行
块级标签： h p div ul ol dl table form
行级标签 a img iframe button span input
今天学习了html了，明天学习css
上一篇： HTML之head学习
下一篇： 前端学习之HTML