html概述(web编程,html基本结构)

文章目录

  • HTML概述
    • 什么是HTML?
    • web编程
    • HTML的基本结构
    • 编写你的第一个html文本
    • 编写一篇博客

HTML概述

本文由sololearn手机app教程整理而来。

什么是HTML?

HTML表示(stand for)HyperText Markup Language,顾名思义它是一种标记语言。与其他脚本/编程语言不同的是,标记语言使用tags来标识内容。一个标识段落的例子为

<p>I'm a paragraphp>

与其他编程语言类似,html文件是纯文本文件,使用普通的文本编辑器即可编辑。

web编程

会使用html语法编程是学习web相关的专业技能的基础。现代web编程的框架为

  • HTML:架构
  • CSS:内容展示风格
  • JavaScript:网页行为
  • PHP及其他类似语言: 后端
  • CMS: 内容管理

HTML的基本结构

基本的HTML结构为:

<html>
<head>...head>
<body>...body>
html>

中包含的内容不被展示,可以引入css等。body内容是可视内容,可包含headings, paragraphs, lists, quotes, images, links等内容。

编写你的第一个html文本

<html>
	<head>
		<title>hello worldtitle>
	head>
	<body>
		This is a line.
	<body>
html>

title标签的内容是浏览器标签页的辨识内容。

编写一篇博客


<html>
    <head>
        <title>My Blogtitle>
        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    head>
    
    <body>
        
        <div id="header" class="section">
            <img alt="" class="img-circle" src="https://code.sololearn.com/Icons/Avatars/0.jpg">
            <p>Alex Simpsonp>
        div>
        
        
        
        <div class="section">
            <h1><span>About Mespan>h1>
            <p>
                Hey! I'm <strong>Alexstrong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skillsi> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearnstrong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
            p>
            <p class="quote">"Declare variables, not war"p>
        div>
        
        
        
        <div class="section">
            <h1><span>My Coding Schedulespan>h1>
            <table>
                <tr>
                    <th>Dayth>
                    <th>Month>
                    <th>Tueth>
                    <th>Wedth>
                    <th>Thuth>
                    <th>Frith>
                tr>
                <tr>
                    <td>8-8:30td>
                    <td class="selected">Learntd>
                    <td>td>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>9-10td>
                    <td>td>
                    <td class="selected">Practicetd>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>1-1:30td>
                    <td>td>
                    <td>td>
                    <td class="selected">Playtd>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>3:45-5td>
                    <td>td>
                    <td>td>
                    <td>td>
                    <td class="selected">Codetd>
                    <td>td>
                tr>
                <tr>
                    <td>6-6:15td>
                    <td>td>
                    <td>td>
                    <td>td>
                    <td>td>
                    <td class="selected">Discusstd>
                tr>
            table>
        div>
        
        
        
        
        <div class="section">
            <h1><span>My Skillsspan>h1>
            <ul>
                <li>HTML <br />
                    <progress min="0" max="100" value="80">progress>
                li>
                <li>JavaScript <br />
                    <progress min="0" max="100" value="50">progress>
                li>
                <li>Python <br />
                    <progress min="0" max="100" value="30">progress>
                li>
            ul>
        div>
        
        
        
         
        <div class="section">
            <h1><span>My Mediaspan>h1>
            <iframe height="150" width="300" src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0">iframe>
        div>
        
        
        
       <div class="section">
            <h1><span>Contact Mespan>h1>
            
            <svg class="face" height="100" width="100">
                <circle cx="50" cy="50" r="50" fill="#FDD835"/>
                <circle cx="30" cy="30" r="10" fill="#FFFFFF"/>
                <circle cx="70" cy="30" r="10" fill="#FFFFFF"/>
                <circle cx="30" cy="30" r="5" fill="#000000"/>
                <circle cx="70" cy="30" r="5" fill="#000000"/>
                <path d="M 30 70 q 20 20 40 0" stroke="#FFFFFF" stroke-width="5" fill="none" />
            svg>
                 
            <form>
                <input name="name" placeholder="Name" type="text" required /><br/>
                <input name="email" placeholder="Email" type="email" required /><br/>
                <textarea name="message" placeholder="Message" required >textarea>
                <input type="submit" value="SEND" class="submit" />
            form>
        div>
        
        
        
        <div class="section" id="contacts">
            <h1><span>Follow Mespan>h1>
            <div>
                < a href="https://www.sololearn.com/" target="_blank">
                    <img alt="SoloLearn" src="https://www.sololearn.com/Uploads/icons/sololearn.png" />
                
                < a href="#">
                    <img alt="Facebook" src="https://www.sololearn.com/Uploads/icons/facebook.png"/>
                
                < a href="#">
                    <img alt="Twitter" src="https://www.sololearn.com/Uploads/icons/twitter.png" />
                
            div>
        div>
        
        
        <div class="copyright">
            © 2017 My Blog. All rights reserved.
        div>
        
    body>
html>

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