Html笔记

目录

视频链接:html_韩顺平

  • 目录
    • Html介绍
    • Html基本结构
      • Html元素
    • 强化作业


该笔记基于韩顺平老师word笔记,程序代码需注意英文状态下双引号的输入,文中未改,可自行订正调试。

Html介绍

HyperText Mark-up Language.
Html 是一种标记语言,主要用途是开发网页,使用html可以展现文字、图片、视频、声音… html 是我们web开发(网站开发)的基础。

  • 发展历程
    横向:1993 第一个版本….>1999 有html4.01….>2008 html5.0
    纵向: 1999 html4.01> xhtml

  • W3C
    W3C是制定web(html, xml, css, xhtml …)标准的组织

  • Html运行原理
    ① 本地运行
    使用应用程序(浏览器)打开.html。

    ② 远程访问运行
    除了自己测试外,其他远程访问html文件。
    从点击url到返回页面中间,发生了什么?


Html基本结构

  • 语法
 <元素 属性=‘属性值’...>内容
 <元素 属性=‘属性值’.../>

Html元素

  • 字体
    例子:
    Html笔记_第1张图片
    代码:

<html>
    <head>
        
        <title>第一个网页title>
    head>
    <body>
        
        <b>第一行文字b>
        
        
        
        <p><font color= #? size>远近高各不同font>p><br/>
    body>
html>

  • 字符实体
    例子:
    这里写图片描述
    代码:
<html>
    <head>head>
    <body>
***********字符实体案例*******************br>
        <front size=7>© £front>
    body>
html>

Html笔记_第2张图片
Html笔记_第3张图片


  • 超链接
***********超链接案例*******************br>

<a href="a.html" target="_self">老鼠爱大米a>


<a href="http://www.sohu.com" target="_blank">链接到搜狐a>
<a href="[email protected]">给管理员写信a><br/>
  • 图片
    Html笔记_第4张图片
***********图片元素*******************br>




<img src=’dog.jpg’ width=30px border=1>img>
<img src=’dog.jpg’ width=30px border=1 />
<img src=’dog.jpg’ width=30px border=1 />
  • 表格
    Html笔记_第5张图片
 ***********表格元素*******************br>

<table border=1 align=”center” bgcolor=”yellow” width=500px>
    <tr align=”center”><td>1td><td>2td><td>4td>tr>
table>


<table cellspacing= ”50pxcellpadding=”10px”>table>
  • 无序列表
    -Html笔记_第6张图片
**********无序列表*******************br>


<ul type=”disc”>
    <li>魔兽li>
    <li>反恐精英li>
    <li>英雄联盟li>
ul>
  • 有序列表
  • Html笔记_第7张图片
**********有序列表*******************br>



<ol type=”1” start=”6”>
    <li>魔兽li>
    li>反恐精英li>
    <li>英雄联盟li>
ol>
  • 框架标识
    Html笔记_第8张图片
**********框架标识******************br>

<frameset clos=”20%, *” frameborder=0>
    <frame src=”aa.html” noresize />
    <frame src=”bb.html”/>
frameset>
  • 表单元素
    Html笔记_第9张图片
**********login.html******************br>

<html>
    <head>
        <title>登陆页面title>
    head>
    <body>
        <h1>登陆系统h1>
        
        
        <form action=”ok.html” method=”post”>
        
        用户名:<input type=”text” name=”username”/><br/>
        密  码:<input type=”password” name=”pwd” /><br/>
        <input type=”submit” value=”登陆”/><input type=”reset” value=”重填”/>
        form>
    body>
html>

Html笔记_第10张图片

**********formdetails.html******************br>

名字:<input type=”text” value=”input herename=”username” /<br/>
密码:<input type=”password” name=”pwd” /><br/>

***喜欢的水果***<br/>
<input type=”checkbox” name=”v1”>西瓜<br/>
<input type=”checkbox” name=”v1”>苹果<br/>

***选择性别***<br/>
<input type=”radio” name=”sex”><br/>
<input type=”radio” name=”sex”><br/>

***隐藏框(可提交数据但是不影响界面布局)***<br/>
<input type=”hidden” value=”123” name=”sal”>
###接上页###
***下拉选择***<br/>
请选择你的出生地:
<select name=”birthplace”>
    <option value=””>---请选择---option>
<option value=”beijing”>北京option>
<option value=”shanghai”>上海option>
select><br/>

***请留言***<br/>
<textarea clos=”30” rows=”10”>textarea><br/>

***请选择你要上传的文件***<br/>
<input type=”file” name=”myfile”/>请选择文件

强化作业

  • 元素类
    Html笔记_第11张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    
    <table border="1" cellspacing=0 cellpadding=10 width=700px bordercolor="#DB9EE0">
        
        <tr align="center" ><td colspan="3">星期一食谱td>tr>
        <tr align="center"><td rowspan="2">素菜td><td>青草茄子td><td>花椒扁豆td>tr>
        <tr align="center"><td>小葱豆腐td><td>炒白菜td>tr>
        <tr align="center"><td rowspan="2">荤菜td><td>油闷大虾td><td>海参鱼翅td>tr>
        <tr align="center"><td>红烧肉<img width="100px" src="C:\Users\Larry Young\Desktop\1.jpg" alt="">td><td>烤全羊td>tr>
    table>
body>
html>

  • 设计企业邮箱
    登陆页面:
    Html笔记_第12张图片
    Html笔记_第13张图片

后续页面:
待改
Html笔记_第14张图片
Html笔记_第15张图片
Html笔记_第16张图片
Html笔记_第17张图片


  • 模仿豆瓣页面
    正在赶来的路上

你可能感兴趣的:(html,html,hanshunping)