欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>&lt  小于号</p>
 <p>&gt  大于号</p>
 <p>&nbsp 空格</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下载地址
下载:
web学习之-html
下载第一个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="用户名由620个字符构成“> 这是一个提示
    </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

相关标签: web